vue axios 跨域的坑

最新推荐文章于 2025-06-30 09:28:10 发布

lmn133

最新推荐文章于 2025-06-30 09:28:10 发布

阅读量4.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 跨域

本文链接：https://blog.youkuaiyun.com/lmn133/article/details/80208533

vue 同时被 2 个专栏收录

1 篇文章

订阅专栏

跨域

1 篇文章

订阅专栏

本文介绍了一个前后端分离项目的联调经历，包括解决跨域问题、配置axios以避免预检请求及使用qs处理POST数据等。此外，还讨论了如何确保后端正确接收前端发送的数据。

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

描述

1.最近在做一个前后端分离的项目，用的是vue-cli搭的环境，然后发请求用的是 axios，但就是在和后端做联调的时候，坑呀。半天一直请求不通，后来发现是因为不在一个局域网。
2.改在一个局域网之后，对于跨域，前端发post请求之前都会发送一个 options 请求（不懂options请求的请自行百度），去验证服务端是否支持当前的 domain 和 methods。但是后端的java暂时不支持 options 请求。所以在 axios 请的配置中加以下的 headers ( headers: {'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'})，就不会发送options请求了，直接发 post 请求。以下是我完整的代码：
```
 ```js
 function axiosApi(method, url, params) {
    return axios({
        method: method,
        // 就是这句
        headers: {'Content-Type':'application/x-www-form-urlencoded;                  charset=UTF-8'},
        url: url,
        data: (method == 'POST' || method == 'PUT') && params ? qs.stringify(params) : null,
       params: method == 'GET' || method == 'DELETE' ? params : null,
       withCredentials: false
    })
  }
```
“`
3.options请求是不发了，但是post请求传过去的数据不见了，后台说是没有数据，都是空的。打开 F12。看到数据都是以 json字符串的格式发送过去（axios默认以 application/json 格式提交数据）。如果使用这种编码方式，那么传递到后台的将是序列化后的json字符串。后台仍旧是使用处理 application/x-www-form-urlencoded 编码方式的方法在处理数据，当然拿不到数据（如果要问我说 2 中设置了headers 中的提交数据格式，为什么这里还是以 json 字符串的格式提交，我也不知道。如果知道请直接留言）。
- 这里的解决方法就是用 qs 。
- npm install –save qs （有人说axios里面有 qs ，但是我不install，run dev 的时候报错）
- 在需要的地方 import qs from ‘qs’
- 然后在发送请求的地方用 qs.stringify(params) 将参数处理一下
如果到这里你觉得结束了，那就是错了。分明请求发送成功了，而且看到后台返回正确的数据了，但是控制台还一直显示跨域，造成数据解析不了。后台没有设置允许跨域的header，需要以下设置

          response.setHeader("Access-Control-Allow-Origin","*");
          response.setHeader("Access-Control-Allow-Methods","POST");