vue本地跨域的一种解决方案分享

vue本地跨域的一种解决方案分享

跨域产生的原因

本质原因：不满足同源策略

同源策略：浏览器的同源策略是浏览器上为安全性考虑实施的非常重要的安全策略，从一个域上加载的脚本不允许访问另外一个域的文档属性

跨域的对象： 浏览器与服务器之间

补充： 跨域请求的过程中，浏览器向服务器发送了请求，服务器接收到了请求，并返回对应数据，只是返回的数据被浏览器拦截

vue中的一种本地可用的解决方案

思路：既然跨域作用于浏览器与服务器之间，那么服务器与服务器之间的数据请求则不受同源策略影响，因此，可借用vue内部自带的服务器将数据获取到，然后返回给浏览器

解决：

// 请求 本地地址 http://127.0.0.1:9999 接口信息: '/bb'
axios.get('/api/bb').then(res => {
      console.log(res)
})

// 在vue.config.js中做如下配置
proxy: {
      //配置跨域
      "/api": {  /* 只有请求地址中有 /api  都会走这里 */
        target: "http://127.0.0.1:2000", //这里填写真实的后台接口
        changOrigin: true, //允许跨域
        pathRewrite: {
          /* 重写路径，当我们在浏览器中看到请求的地址为：
          http://127.0.0.1:9999/api/bb 时
                  实际上访问的地址是：
          http://127.0.0.1:2000/api/bb,因为重写了 /api
                 */
          "^/api": ""  //  遇到请求地址中有api的就直接替换成 ''   
        }
      }
    }

附network图片：

其他解决跨域的方式记录

1. 通过jsonp跨域
2. 使用HTML5中新引进的window.postMessage方法来跨域传送数据（该方法存在兼容性问题，只用来处理post请求）