关于Axios发送Get请求无法添加Content-Type

news2024/11/20 11:40:56

在拦截器中尝试给headers添加Content-Type:

request.interceptors.request.use(
    config => {
        if (!config.headers['Content-Type']) {
            config.headers['Content-Type'] = 'application/json';
        }
        return config;
    },
    error => {
        return Promise.reject(error)
    }
)

如果是GET请求,会发现请求头中无论如何加不上Content-Type,查看源码:

    // Remove Content-Type if data is undefined
    requestData === undefined && requestHeaders.setContentType(null);

如果data未定义则会将Content-Type设置为null;
那么修改data,也是从网上查到的:

request.interceptors.request.use(
    config => {
        if (config.method === 'get' && !config.data) {
            config.data = {unused: 0};
        }
        if (!config.headers['Content-Type']) {
            config.headers['Content-Type'] = 'application/json';
        }
        return config;
    },
    error => {
        return Promise.reject(error)
    }
)

普通GET请求可以正常添加Content-Type,但是如果需要将Content-Type改成“multipart/form-data”,会发现Content-Type变成了false,再次查看源码:

    if (utils.isFormData(requestData)) {
      if (platform.hasStandardBrowserEnv || platform.hasStandardBrowserWebWorkerEnv) {
        requestHeaders.setContentType(false); // Let the browser set it
      } else if ((contentType = requestHeaders.getContentType()) !== false) {
        // fix semicolon duplication issue for ReactNative FormData implementation
        const [type, ...tokens] = contentType ? contentType.split(';').map(token => token.trim()).filter(Boolean) : [];
        requestHeaders.setContentType([type || 'multipart/form-data', ...tokens].join('; '));
      }
    }

就是说如果是一个对象,axios会将Content-Type设为false,意图让浏览器自动设置;
这时修改data:

request.interceptors.request.use(
    config => {
        if (config.method === 'get' && !config.data) {
            // 这个是关键点,加入这行就可以了  解决get  请求添加不上content_type
            //如果设置为对象,axios会强制将content-type=multipart/form-data设置为false
            config.data = true
        }
        if (!config.headers['Content-Type']) {
            config.headers['Content-Type'] = 'application/json';
        }
        return config;
    },
    error => {
        return Promise.reject(error)
    }
)

此时才能正常添加content-type:
企业微信截图_20231226180356.png
只能说axios封装了太多东西,官网又很简略。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1337766.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【流复制环境PostgreSQL-14.1到PostgreSQL-16.1大版本升级】

PostgreSQL大版本会定期添加新特性,这些新特性通常会改变系统表的布局,但内部数据存储格式很少改变。pg_upgrade通过创建新的系统表和重用旧的用户数据文件来执行快速升级。 pg_upgrade升级主要有三种用法: 1、使用pg_upgrade拷贝升级。 2、…

Redis分布式缓存之主从哨兵分片集群

Redis主从 数据同步原理 Redis哨兵 Redis分片集群 集群伸缩:在集群中插入或删除某个节点 集群故障转移

使用ffmpeg实现视频旋转并保持清晰度不变

1 原始视频信息 通过ffmpeg -i命令查看视频基本信息 ffmpeg -i source.mp4 ffmpeg version 6.1-essentials_build-www.gyan.dev Copyright (c) 2000-2023 the FFmpeg developersbuilt with gcc 12.2.0 (Rev10, Built by MSYS2 project)configuration: --enable-gpl --enable-…

Java 基础学习(十九)网络编程、反射

1 Socket编程 1.1 Socket编程概述 1.1.1 Socket简介 在网络编程中,Socket(套接字)是一种抽象概念,它用于在不同计算机之间进行通信。Socket可以看作是一种通信的端点,可以通过Socket与其他计算机上的程序进行数据传…

亚马逊云科技 re:Invent 2023 产品体验:亚马逊云科技产品应用实践 国赛选手带你看 Elasticache Serverless

抛砖引玉 讲一下作者背景,曾经参加过国内世界技能大赛云计算的选拔,那么在竞赛中包含两类,一类是架构类竞赛,另一类就是 TroubleShooting 竞赛,对应的分别为亚马逊云科技 GameDay 和亚马逊云科技 Jam,想必…

Pytest框架 —— 用例标记和测试执行篇!

pytest用例标记和测试执行篇 上一篇文章入门篇咱们介绍了pytest的前后置方法和fixture机制,这个章节主要给大家介绍pytest中的标记机制和用例执行的方法。pytest可以通过标记将数据传入于测试函数中,也可以通过标记中对执行的用例做筛选,接下…

WebGL开发安全培训应用

使用 WebGL 开发安全培训应用可以为员工提供在虚拟环境中体验危险情境、学习安全操作和应急处理技能的机会。以下是开发安全培训应用的一般步骤,希望对大家有所帮助。北京木奇移动技术有限公司,专业的软件外包开发公司,欢迎交流合作。 1.明确…

Web(10)XSS漏洞

XSS跨站脚本攻击 XSS是什么 XSS(cross-site-scripting) 即是跨站脚本攻击,是一种网站应用程序的安全漏洞攻击,是代码注入的一种。它允许恶意用户将代码注入到网页上,其他用户在观看网页时就会受到影响。这类攻击通常包含了 HTML 以及用户端…

实战10 角色管理

目录 1、角色后端接口 2、角色列表查询 2.1 效果图 2.2页面原型代码 2.3 角色api代码 role.js 2.4 查询角色列表代码 4、 新增和编辑角色 5、删除角色 6、分配权限 6.1 分配权限思路 6.2 分配权限回显接口 6.3 分配权限回显前端实现 6.4分配权限后端接口 6.4.1 R…

实验八 基于FPGA的分频器的设计

基本任务一:设计一个分频器,输入信号50MHZ,输出信号频率分别为1KHZ,500HZ,1HZ。 m100: 扩展任务二:控制蜂鸣器发出滴滴滴的声音

补题与总结:leetcode第 377 场周赛

文章目录 写在最前面的复盘2977. 转换字符串的最小成本 II(Flody 爆搜优化->dp) 写在最前面的复盘 感谢leetcode,丰富了我为数不多的卡常经验 2是简单思维题,但卡常 4是爆搜优化,也卡常,补题时给卡麻了…

【HBase】——简介

1 HBase 定义 Apache HBase™ 是以 hdfs 为数据存储的,一种分布式、可扩展的 NoSQL 数据库。 2 HBase 数据模型 • HBase 的设计理念依据 Google 的 BigTable 论文,论文中对于数据模型的首句介绍。 Bigtable 是一个稀疏的、分布式的、持久的多维排序 m…

.Net7.0 或更高版本 System.Drawing.Common 上传图片跨平台方案

项目升级.Net7.0以后,System.Drawing.Common开关已经被删除,且System.Drawing.Common仅在 Windows 上支持 ,于是想办法将原来上传图片验证文件名和获取图片扩展名方法替换一下,便开始搜索相关解决方案。 .Net6.0文档:…

Python 高级(四):线程池 ThreadPoolExecutor

大家好,我是水滴~~ 当涉及到需要同时处理多个任务的情况时,使用线程池是一种高效的方法。Python提供了concurrent.futures模块,其中的ThreadPoolExecutor类使得使用线程池变得非常方便。本文将详细介绍Python线程池的概念、使用方法和示例代…

使用 AnyGo 修改 iPhone 手机定位

在当今数字化时代,我们的手机已经成为我们日常生活中不可或缺的一部分。然而,有时我们可能会遇到一些情况,需要修改手机的定位信息。这个需求可能来自于各种不同的原因,包括但不限于保护个人隐私、测试应用程序的地理位置相关功能…

数据仓库【5】:项目实战

数据仓库【5】:项目实战 1、项目概述1.1、项目背景1.2、复购率计算 2、数据描述3、架构设计3.1、数据仓库架构图 4、环境搭建4.1、环境说明4.2、集群规划4.3、搭建流程 5、项目开发5.1、业务数据生成5.2、ETL数据导入5.3、ODS层创建&数据接入5.4、DWD层创建&…

【面试】Java中的多种设计模式(十种主要设计模式)

Java中的多种设计模式(十种主要设计模式) 文章概述 设计模式是一套被反复使用、多数人知晓的、经过分类的、代码设计经验的总结。它是软件工程中常见问题的解决方案的一种描述或模板。设计模式可以提供一种通用的、可重用的解决方案,帮助开发…

leetcode 75. 颜色分类(medium)(优质解法)

链接&#xff1a;力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 代码&#xff1a; class Solution {public void sortColors(int[] nums) {int left-1,rightnums.length,i0;while(i<right){if(nums[i]0){left;swap(nums,left,i);i;}else if(nums…

【学习笔记】Java函数式编程03 Stream流-终结操作

书接上回 3.3.3 终结操作 3.3.3.1 forEach 对集合的每一个元素进行处理 接触很多了不赘述 3.3.3.2 count 用来获取当前流中的元素的个数 比如&#xff0c;打印出所有作家的作品的总数 System.out.println(authors.stream().flatMap(author -> author.getBooks().stre…

第九部分 图论

目录 例 相关概念 握手定理 例1 图的度数列 例 无向图的连通性 无向图的连通度 例2 例3 有向图D如图所示&#xff0c;求 A, A2, A3, A4&#xff0c;并回答诸问题&#xff1a; 中间有几章这里没有写&#xff0c;感兴趣可以自己去学&#xff0c;组合数学跟高中差不多&#xff0c…