Vue中的跨域问题

什么是跨域？

跨域问题其实就是浏览器的同源策略所导致的。

「同源策略」是一个重要的安全策略，它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。

MDN

什么是同源呢？

协议+域名+端口，三者一致认为是同源

例如：

http://www.baidu.com:8080和http://www.baidu.com:8081二者端口不一样，跨域

http://www.jingdong.com和http://www.baidu.com二者域名不一样，跨域

https://www.baidu.com和http://www.baidu.com二者协议端口都不一样，跨域（https://默认端口443，http://默认端口80）

http://www.baidu.com/a.js和http://www.baidu.com/b.js，这两者是同源的

怎么解决跨域

• 通过jsonp跨域
• document.domain + iframe跨域
• location.hash + iframe
• window.name + iframe跨域
• postMessage跨域
• 跨域资源共享（CORS）
• nginx代理跨域
• nodejs中间件代理跨域
• WebSocket协议跨域

加粗为常用，jsonp基本过时，了解一下原理

JSONP

在发送Ajax请求时，不论请求的资源是何种类型都通不过同源策略，但是！！！你会发现<script>、<img>、<iframe>等没有这种限制。然后，js是支持json的，那么把json数据放到js中就可以接收了。废话少说上代码

<!--本地请求-->
<script>
  var local = function(data) {
    console.log('请求到的数据是：', data);
  }
</script>
<script src="/js/jsonp.js"></script><!--可以是请求接口-->

<!--服务器（js）-->
local('data from jsonp!')

然后运行页面

完事，这就是jsonp，jquery的ajax中也提供了jsonp的请求方式，缺陷只能发送GET请求

CORS

普通跨域请求：只服务端设置Access-Control-Allow-Origin即可，前端无须设置，若要带cookie请求：前后端都需要设置。

Vue跨域解决

在vue.config.js中配置跨域，注释已经很清楚了吧，不懂可以QQ，微信，电邮问我

module.exports = {
  devServer: {
    host: "localhost",
    port: 8000, // 端口号
    https: false, // 是否https
    open: true, //配置自动启动浏览器
    // proxy: 'http://127.0.0.1:8080' // 配置跨域处理,只有一个代理

    // 配置多个代理
    proxy: {
      '/socket.io': {
        target: 'http://127.0.0.1:7001/', // 要访问的接口
        ws: true, // 是否启用websockets
        changeOrigin: true, //开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
        pathRewrite: {
          '^/api': '' //在请求中用'/api'代替target里面的地址,比如我要调用'http://40.00.100.100:3002/user/add'，直接写'/api/user/add'即可
        }
      },
    }
  }
};