【VUE】解决“Request header field content-type is not allowed by Access-Control-Allow-Headers”问题_vue request header field x-staffid is not allowed

问题描述

在向用nodejs快速搭建的mock服务器发送请求时出现“Request header field content-type is not allowed by Access-Control-Allow-Headers”报错。

问题解决

在request配置中添加请求拦截器即可

import qs from 'qs'
// 添加请求拦截器
service.interceptors.request.use((config) => {
    //在发送请求之前做某件事
    if(config.method  === 'post'){
        config.data = qs.stringify(config.data);
    }
    return config;
},(error) =>{
    // 对请求错误做些什么
    console.log("错误的传参")
    return Promise.reject(error);
});
1
2
3
4
5
6
7
8
9
10
11
12
13

问题原因

原因是没有对post附带的请求参数（data）进行字符化的处理。（需要npm安装qs）

排错过程

项目是用vue-admin-template（比较老的版本了）改的，所以我一开始也没想到居然源代码里居然有问题？带data的post请求无法发送？？不过也有可能在其他什么地方藏着我没用到吧。
于是一会儿看根据报错提示F12里的网络，一会儿去看nodejs里的配置文件是不是header没有加自定义的token配置。最后控制变量法发现，是因为加了data才会出现报错，于是去找post+data为什么报错，于是发现需要qs而源代码没用…

参考资料

https://segmentfault.com/q/1010000013599804/a-1020000013600602