跨域产生的原因(解决前后端分离的跨域)

控制台报跨域的错的时候，后端已经接收到请求并进行响应了只是浏览器对响应内容进行了拦截了。 意思就是不允许js对远程的网站发送请求。 解决办法就是让它们处于同一个域。

知道了产生的原因就知道为什么那样解决了

有一个条件不同，我们都可以理解为存在跨域问题。

vue-cli2 方案

module.exports = {
  dev: {
 
    // Paths
    assetsSubDirectory: static,
    assetsPublicPath: /,
    proxyTable: {
      /: {
        target: http://localhost:8082,
        changeOrigin: true,
        pathRewrite: {
          ^/: 
        }
      },
      /ws/*: {
        target: ws://127.0.0.1:8082,
        ws: true
      }
    },
    ...
  }

如果你有更多的拦截规则，继续在这里配置就可以了，这些配置只会在开发环境下生效，当项目编译打包时，这些配置是不会打包进去的，也就是说，项目发布的时候，这些配置是失效的，这个时候我们通过 Nginx 或者将前端代码拷贝到后端，就可以解决生产环境下的跨域问题了（相当于开发时候的跨域在生产环境下不存在）。

相对来说，vue-cli2 在这里的配置还比较容易。

vue-cli3 方案

一开始没多想，还是 vue-cli2 里边的老办法，只不过是在 vue-cli3 创建的项目的 vue.config.js 文件中进行配置，文件位置如下图：

let proxyObj = {};
proxyObj[/ws] = {
    ws: true,
    target: "ws://localhost:8081"
};
proxyObj[/] = {
    ws: false,
    target: "http://localhost:8081",
    changeOrigin: true,
    pathRewrite: {
        ^/: 
    }
};
module.exports = {
    devServer: {
        host: localhost,
        port: 8080,
        proxy: proxyObj
    }
}

首先我们创建一个 proxyObj 用来放各种代理对象，至于代理的内容这里的则和 vue-cli2 中的没有太多差异。要注意的是，HTTP 请求代理中，多了一个属性 ws: false，用过 vue-cli3 同学可能发现了，如果不加这个属性，浏览器控制台会一直报连不上 socket 的错，加上就没事了。

最后在 devServer 中指定项目的 host 和 port ，然后再配置一下 proxy 对象就可以啦。

这就是我们在 vue-cli3 中请求的配置。

不过这里的配置老实说没有什么难度，做过一次就会啦，要是没做过，头一次可能得折腾半天。

前后端分离如何解决跨域问题：https://wangsong.blog..net/article/details/100418453