vue2跨域问题解决[前端方法]-Toy模板网

这篇具有很好参考价值的文章主要介绍了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/)即可。文章来源地址https://www.toymoban.com/news/detail-477723.html

到了这里，关于vue2跨域问题解决[前端方法]的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！