Vue之axios请求踩坑记

作者: bb7bb | 来源:发表于2018-04-14 15:39 被阅读192次

在我们使用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.

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

相关文章

网友评论

  • dmeng_Mr:不能直接axios.post这样
    bb7bb:@dmeng_Mr 🤓axios坑人无数
    dmeng_Mr:@bb7bb 试过,没用,要不就是后台获取值有问题
    bb7bb:@dmeng_Mr 你需要qs一下就可以
  • dmeng_Mr:不行的,这样的话传给后端的参数是拿不到的,今天我也遇到这个问了,最终解决是用axios({''method:"post"...})这样后端才能拿到值

本文标题:Vue之axios请求踩坑记

本文链接:https://www.haomeiwen.com/subject/teslkftx.html