三种主流的跨域解决方案（vue-cli3 package.json中配置跨域）

协议 - 域名 - 端口号 只要有一个不相同就是跨域，解决方案如下

1. Http Proxy 代理

在 vue-cli3 中取消了配置文件 vue.config.js，网上的跨域处理多为新建配置文件，对于有代码洁癖的我这样是不允许的，在读了一番文档后，结合网上的实现方案得到如下解决方案

• 在 package.json 中加入 vue 字段（下面的代码段）
• 如果请求的地址不是 /api，借助 pathRewrite 将 /api 替换
• 我用的是 axios 进行网络请求，在封装 axios 时设置 baseURL: '/api'

  "vue":{
     
    "devServer":{
     
      "proxy":{
     
        "/api": {
     
          "target": "http://xxx.xxx.x.x:8002/",
          "changeOrigin": true,
          "ws": true,
          "pathRewrite": {
     
            "^/api": ""
          }
        }
      }
    }
  }

2. CORS 跨域资源共享（后端设置）

设置响应头（需要处理 options 请求）

'Access-Control-Allow-Origin' : '*', //任何页面都可以访问这个服务
// 'Access-Control-Allow-Origin' : 'http://baidu.com', //只允许百度来访问这个服务
'Access-Control-Allow-Headers' : 'X-Test-Cors', //允许含有这个头信息的request请求服务
'Access-Control-Allow-Methods' : 'POST,PUT,DELETE', // 设置允许跨域的方法
'Access-Control-Allow-Credentials' : true	// 设置允许携带凭证

弊端：

• 如果 Access-Control-Allow-Origin 设置单一源不能同时设置多个
• 如果 Access-Control-Allow-Origin 设置为 * 不允许携带 cookie

3. JSONP

1. 前端声明一个 全局 函数

   function func(){
          ...}
   

2. 通过不存在 跨域限制的标签（script, img, iframe, link…） 向服务器发送带有 本地函数 的请求

   http://xxx.xxx.0.1:8080/list?callback=func
   

3. 服务器接受到请求，将要返回数据拼接到接受到的函数中

   返回 'func('+ data +')'
   

4. 前端接受到后台消息，网页会认为是一个函数调用，这样就能拿到后台数据

弊端：

• 只能处理 GET 请求
• 数据容易被拦截