描述
- 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");