Vue之axios请求踩坑记

在我们使用Vue框架的时候,我们不免会遇到各种各样的问题,话不多说。我们直接扔出我们的问题

Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.

Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.

Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.

重要的错误报三遍,以至于还在搜索这个问题的能够看见这篇帖子

错误

那么我们的请求代码如下

let obj = {
        user: '020551',
        id: 'bb7bb'
};
return axios.post('url',obj);

看到这个我心里咯噔一下,这不就是跨域问题么?网上一搜也大都是说跨域问题。

在这里我们不要给误导了,这个不是跨域问题,这只是axios的post请求参数格式出问题了

axios的post请求发送健值对,需要引用qs处理一下才可以发送

npm install --save qs    //装一个qs模块

import qs from 'qs';       //引用qs模块
let obj = {
        user: '020551',
        id: 'bb7bb'
};
//post 请求
return axios.post('url',qs.stringify(obj));    //这样就不会报错了 

//或者get请求
return axios.get('url',{obj:obj});     //不这么写就会报错preflight response.

到这里问题就基本已经解决了!希望能给还在奔波解决这个问题的来个警醒,同时也能为未踩这坑的来个预防

你可能感兴趣的:(Vue之axios请求踩坑记)