vue2跨域问题解决[前端方法]

vue2跨域问题解决[前端方法]

前端项目中常见的跨域报错如下：

Access to XMLHttpRequest at 'https://xxx.com/ms/' from origin 'http://10.23.30.135:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

针对这种跨域的报错我们可以通过后端设置 Access-Control-Allow-Origin 的header来解决，但一般前端无法去操作后台服务所以很不方便去实现。

因此，可以使用vue-cli内置的配置方法来实现。

解决

我们可以在vue-cli官网的配置参考[https://cli.vuejs.org/zh/config/#devserver]中找到devServer属性解决跨域问题。

在实际的项目中，我们需要做两步操作来解决跨域。

1、修改我们的axios的默认请求地址为/api

axios.defaults.baseURL = '/api'

上面的 /api 会作为我们代理的时候需要替换的地址，也可以自行定义，在后面vue.config.js中配置devServer属性的时候同步修改对应内容即可。

2、在vue.config.js配置devServer属性

module.exports = {
  devServer: {
    proxy: {
      "/api": {
        target: "[实际请求的目标地址]",
        changeOrigin: true,
        pathRewrite: {
          "^/api": ""
        }
      }
    }
  }
}

之后，重启项目即可生效代理服务。

关于上面实际请求的目标地址的获取问题：

比如，你实际请求某个服务的请求地址是 https://www.xxx.com/ms/users/xiaowang，这个请求地址主要是分为ip( https://www.xxx.com/ms/)和你写在前端项目里面的接口(/user/xiaowang)，这样上面的target属性就填入请求ip( https://www.xxx.com/ms/)即可。