记录 vue 使用 axios 请求跨域问题

跨域是一个很常见的问题：不同域名、不同端口、不同协议，都会产生这个问题。

解决方法呢也有几个：传统的 jsonp、vite 配置代理、后端服务器上配置 CORS 头等。

今天遇到的问题，是 build 好了 vue 的静态资源，放到服务器上去请求后端接口，报的跨域问题。

首先前置条件，已知后端使用 vol 开发框架生成的前后端完整站点内容

但由于前端之前先开发了一段时间，已创建好大体框架，通用基础组件等，并未使用该 vol 框架生成的前端代码修修改改，故需要用自己的前端代码来联调后端接口。

 

最开始以为是后端未配置 cors 导致的跨域问题，但经过查验发现，ngnix 启动的 vol 前端端口为 8056，后端访问的端口为 9996，并未存在跨域

 

同时，自写的前端资源服务器端口 8037，已被 vol 后端服务 配置成了 允许跨域端口地址：

 

但是还是存在跨域的报错：（验证码图片加载失败）

 

浏览器直接请求获取验证码接口，能直接返回，说明接口没问题：

 

8037 页，浏览器 f12 console 中，使用 fetch 请求，也能请求到：

 

初步断定为 axios 请求配置的问题。（不过还尝试了下在 vue 中使用 fetch，居然也会跨域。。。）

 

暂时不知道为什么影响的，vue-cli 新建个项目尝试一下：（同时写了2种请求）

 

 结果一个好使，另一个还报跨域，说明就是  axois  请求的配置问题：

 

（附上axios 请求头配置）

 

没啥想法了，问问 deepseek：

 

然后就看到了：

 

这个字段是沿用以前项目的配置，直接 copy 过来的，同事还给加了个备注，但实际上是没有用的，起码现在联调的这个项目没有用到 cookie。（估计之前的项目后端有配置 cookie 之类的校验）

抱着任何可能都尝试一下的念头，把该字段注释，重新 build：

 

 居然还真是因为这个字段！

 

坑了我大半天，不过还好最后解决了~hhh~（昨天说今天把功能给到测试，还好没食言，下班前9分钟终于部署好了。。。）