1.为什么有跨域的存在？

前后端分离的一种开发模式下，在前端客户端向服务端发送 ajax 请求的时候受到同源策略的限制，因为 ajax是基于http 协议的异步 JavaScript 和 XML,是一种用于前后端数据交互的技术，从而实现网页异步更新，而 http 又受到同源策略的限制。因此产生了跨域的问题。

同源策略实质指 "协议+域名+端口号"三者相同，三者缺一不可。

当然也存在一些不受同源策略限制的情况，如下：

（1）script 标签允许跨域嵌入脚本，因此不受跨域限制。

（2）img 、link 标签、@font-face 不受跨域影响。

（3）video 和 audio 嵌入的资源不受跨域影响。

（4）iframe 载入的任何资源不受跨域限制。

（5）object 、embed 和 applet 插件不受同源限制。

（6） websocket 协议通信不受同源限制，只要服务器支持就可以实现跨域通信。

2.常见的跨域解决方法总结？

（1）基于 JSONP 技术实现跨域。

（2）CORS–跨域资源共享。

（3）使用代理服务器转发请求。

1，vue中有提供反向代理的接口，就是config/index.js中的proxyTable，我的脚手架版本是2.9.6，proxyTable配置初始为空，如下图。

2,将proxyTable配置如下：

proxyTable: {
     '/api': {                       //需要代理的接口
       target:'http://39.97.33.178', //目标服务器
       changeOrigin: true,　　　　　　 //是否跨域
       pathRewrite: {
         '^/api': '/api'             //重定向
       }
     }
   },

例如：我需要访问的接口是：http://39.97.33.178/api/cityList，第一行 ‘/api‘ 是一个标识，告诉它只代理接口里面有/api这个字段的接口，我的目标服务器就是http://39.97.33.178，即target定义的，pathRewrite重定向 ‘^/api’: ‘/api’ 就是在代理是时候使用/api 代理 http://39.97.33.178/api，使用的时候就可以直接这样使用：

this.$axios.get('/api/cityList').then((res)=>{
    console.log(res)
})

重定向也可以为空 ‘^/api’: ’ ‘,使用的时候就需要多加一层：
this.$axios.get(’/api/api/cityList’).then((res)=>{
console.log(res)
})

第一个/api 相当于 路径代理到 http://39.97.33.178 ，第二个/api/cityList才是接口里面的路径

注意：坑点
上传文件的接口配置了反向代理可能也会出错：
1.错误码400可能传参错误
2.跨域可能没有设置请求头,请求头代码如下

axios.post(url, params, {
          headers: {
            'Content-Type': 'multipart/form-data',
          }
        })
        .then(res => {
          console.log(res)
        })
        .catch(err => {
          console.log(err)
        })

	let formData = new FormData();
   formData.append("uploadFile", data[0].file); //接口需要传的参数
   formData.append("compreFormat", "png"); //接口需要传的参数
   UploadFile(formData).then(res => {
     console.log(res); //城市列表
 	});