Vue跨域问题

一、什么是跨域

跨域，是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript实施的安全限制。无法跨域是浏览器对于用户安全的考虑。

同源就是指，域名、协议、端口均为相同。如果你发送请求的url地址的协议、域名、端口任何一个与当前页面的url不同就会造成跨域。

浏览器一般为我们非同源的资源做出了以下限制

• 无法向非同源地址发送 AJAX 请求
• 无法接触非同源网页的 DOM
• 无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB

二、在Vue中的实现跨域

跨域问题的解决方案有很多，比如：JSONP，CORS ，postMessage，Websocket，Node 中间件代理，nginx 反向代理等，这里就不在做过多赘述，这篇文章（https://zhuanlan.zhihu.com/p/55858103）讲的非常详细，我在这里插个眼，以后很可能会用到。

书归正传。在Vue中实现跨域可谓是非常简单，只需要在配置文件(vue.config.js)中将跨域相关配置进行设置，我这里用的是脚手架4

module.exports = {
  devServer: {
    proxy: {
      "/api": {
        target: "https://list.mogujie.com",
        // 允许跨域
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          "^/api": ""
        }
      }
    }
  }
};

Vue一般是用axios框架发送的网络请求，所以需要在main.js文件中配置一下axios

axios.defaults.baseURL = "/api";
axios.defaults.headers.post["Content-Type"] = "application/json";

发送请求

axios({
  url: "/search?page=1&sort=new"
}).then(res => console.log(res));

拿到接口数据

三、Vue跨域实现的原理

访问的目标接口地址是 https://list.mogujie.com/search?page=1&sort=new，现在这串地址的 https://list.mogujie.com 这部分用拦截器 /api 替代，当服务器启动的时候，在文件中读取到 ‘ /api ’ 这串字符串的时候，会变成 http:localhost/8080/api/search?page=1&sort=new，而此时路径重写设置为忽略拦截器的名字，也就是说不包含拦截器的名字，所以，访问路径会变成这样http:localhost/8080/search?page=1&sort=new，最后就会成功跨域访问。