Vue使用Axios请求报No 'Access-Control-Allow-Origin'错误能否仅前端解决

首先修正你的错误用法 #

Access-Control-Allow-Origin 属于服务端响应头，你在前端请求头里加这个字段完全没有作用，反而会因为额外添加了非标准请求头触发预检请求，加剧跨域问题，先把这段headers配置删掉。

无服务端修改权限的前端可用解决方案 #

所有可行方案本质都是通过服务端中转绕开浏览器同源策略限制，不存在纯静态前端代码层面直接绕过CORS的方法：

1. 开发阶段：使用框架自带的代理转发功能

本地开发服务器（Node.js 环境）发起的请求不受浏览器同源策略限制，通过本地服务做一层请求中转即可解决跨域问题。

• 如果你用的是Vue CLI（webpack）：在项目根目录的vue.config.js中添加如下配置：

module.exports = {
  devServer: {
    proxy: {
      // 匹配所有以/api开头的请求，可根据实际情况修改前缀
      '/api': {
        target: '你要请求的目标接口域名，比如https://example.com',
        changeOrigin: true,
        // 如果接口本身没有/api前缀，可以用pathRewrite去掉
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

配置完成后重启开发服务，把原来直接请求目标域名的地址改成/api/前缀即可，比如原请求地址是https://example.com/getData，现在改为请求/api/getData。

• 如果你用的是Vite：在vite.config.js中添加如下配置：

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: '你要请求的目标接口域名',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

使用规则和Vue CLI完全一致。

2. 生产部署阶段：使用部署服务做反向代理

原理和开发代理完全一致，所有接口请求先打到你部署前端的服务器，由服务器转发到目标接口。
以最常用的Nginx部署为例，在Nginx配置文件的server块中添加如下配置：

location ^~ /api/ {
    proxy_pass 你要请求的目标接口域名/;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
}

配置后重启Nginx即可，前端请求规则和开发阶段保持一致。

3. 特殊场景：接口支持JSONP

如果目标接口支持JSONP格式返回，你也可以用JSONP方式请求，不过JSONP仅支持GET请求，且Axios本身不支持JSONP，需要安装axios-jsonp插件适配，或者用原生JS的JSONP实现。

注意事项 #

如果既不能配置代理也无法修改服务端配置，只能使用浏览器跨域扩展作为临时调试方案，没有其他可行方法。

内容的提问来源于stack exchange，提问作者helphp