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

最新推荐文章于 2023-12-05 20:22:23 发布

RogerQianpeng

最新推荐文章于 2023-12-05 20:22:23 发布

阅读量3.9k

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/RogerQianpeng/article/details/121055404

版权

Vue 专栏收录该内容

18 篇文章 3 订阅

订阅专栏

问题描述

在向用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);
});

问题原因

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

排错过程

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