Vue中Axios发起接口请求出现跨域问题:has been blocked by CORS policy

原创已于 2022-04-15 10:54:43 修改 · 7.6k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#跨域 #Vue #Axios

于 2022-04-15 10:52:17 首次发布

项目开发日记同时被 2 个专栏收录

60 篇文章

订阅专栏

前端

31 篇文章

订阅专栏

本文介绍了如何处理浏览器的CORS政策导致的跨域问题。在前端，可以通过在vue.config.js中设置代理，伪装请求来规避跨域限制。在后端，虽然也可以配置允许跨域，但实际操作中可能较为复杂。提供了详细的前端代理配置示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

blocked by CORS policy:Access-Control-Allow-Origin通常指的就是浏览器判断请求跨域问题导致.

在这里插入图片描述

解决方案:

1.前端设置代理的方式:

在vue.config.js的配置文件中,配置代理伪装请求的方式,解决跨域:
详细配置和配置属性解释,见代码注释

devServer: {
  port: 9999,
  // open: true,
  // 设置代理
  proxy: {  //配置跨域
        '/api': {
        target: 'https://www.baidu.com/',  //这里后台的地址模拟的;应该填写你们真实的后台接口
        ws: true,
        changOrigin: true,  //允许跨域
        pathRewrite: {
        "^/api": "" //这里理解成用'/api'代替target里面的地址,比如我要用'https://www.baidu.com/user/add'，直接写'/api/user/add'即可
                }
            }
        },
  overlay: {
    warnings: false,
    errors: true
  }
},

2.后端设置:

据说后端可以配置,允许跨域访问,该方式未尝试,一般对接别人的api也很少可能叫动其该后端程序配置,后端程序可能需要考虑其他程序对接等.