使用Fetch时,post数据时,后端接收的Content-Type为text/plain
在使用 Fetch做一个前端的post请求时,直接从网上抄了一段代码
export async function postData(url, data){const response = await fetch(url, {method: 'POST', // *GET, POST, PUT, DELETE, etc.mode: 'no-cors', // no-cors, *cors, same-originheaders: { 'Content-Type': 'application/json','Accept':'application/json' },body: JSON.stringify(data) // body data type must match "Content-Type" header});
}
在本地测试时,一个有趣的事情发生了
从前端控制台我们可以得到一个415(这个一般是请求的文本格式有问题)

从后端看到的日志为
Content type 'text/plain;charset=UTF-8' not supported
实际上上述代码是添加了请求头了,同时从前端的请求信息中也可以得出
Content-Type: application/json
确实没有错,但是到了后端怎么回是text/plain呢?
各种操作都试了还是不行,最后发现因为设置了no-cors
问题是,当您在“模式”“no-cors”下工作时,标头变得不可变,您将无法更改其某些条目。您无法更改的头部之一是 Content-Type。当您将“mode”设置为“no-cors”时,您将只能更改这些标头:
AcceptAccept-LanguageContent-LanguageContent-Typeand whose value, once parsed, has a MIME type (ignoring parameters) that isapplication/x-www-form-urlencoded,multipart/form-data, ortext/plainIn another words, in ‘mode’ ‘-no-‘cors’ you can only set
application/x-www-form-urlencoded,multipart/form-data, ortext/plainto theContent-Type。所以解决方案是停止使用 fetch 或将其更改为 ‘cors’ ‘mode’。当然,这只有在您的服务器也接受“cors”请求时才有效。
javascript - Fetch: post json 数据,application/json 变为 text/plain - SegmentFault 思否
最后移除 mode: 'no-cors', // no-cors, *cors, same-origin 就可以了!!!
cors是和跨域问题有关的,解决跨域的问题还是很多方法的,除了添加头以外
相关文章:
使用Fetch时,post数据时,后端接收的Content-Type为text/plain
在使用 Fetch做一个前端的post请求时,直接从网上抄了一段代码 export async function postData(url, data){const response await fetch(url, {method: POST, // *GET, POST, PUT, DELETE, etc.mode: no-cors, // no-cors, *cors, same-originheaders: { Content-…...
大型智慧校园系统源码 智慧校园源码 Android电子班牌源码
一款针对中小学研发的智慧校园系统源码,智慧学校源码带电子班牌、人脸识别系统。系统有演示,可正常上线运营正版授权。 私信了解更多! 技术架构: 后端:Java 框架:springboot 前端页面:vue e…...
【MySQL】你知道的MySQL中的集合函数有哪些呢?
集合函数排名AVG()函数COUNT()函数SUM()函数MAX()函数 和 MIN()函数总结大家好,我是小冷。 上一篇写了 看看ChatGPT是如何回答面试官的问题的? 地址是&#x…...
科目一罚款题
第一种:20~200元关键字:遮车牌、改信息1、故意使用物品遮挡号牌的2、号牌刮花严重,掉漆未处理继续使用的3、驾驶人联系方式、地址等信息发生变化时,没有及时申报变更信息的4、驾驶人不在现场、或虽在现场但拒绝立即驶离࿰…...
Maven中央仓库地址大全
一、仓库地址配置方式关于 Maven 远程仓库地址的配置方式有两种:第1种:直接在项目的 pom.xml 文件中进行修改(不推荐,尤其是在多人协助的开发过程中非常的费事费力);第2种:将 Maven 的远程仓库统…...
人工智能的未来———因果推理what if 第11章(统计模型) 文章解读
我们在观察数据当中,一般使用样本均值去估计目标人群的均值 在所有情况都是理想的情况下: 平均因果效应...
百度贴吧发帖软件如何发布?
百度贴吧发帖软件如何发布?贴吧软件发帖顶帖视频教学,防删图技术视频教学#贴吧发帖#贴吧顶帖 大家好,今天给大家讲一下一个贴软件发电机顶帖的视频教学。先给大家讲一下软件一个发帖。今天我们用的一个软件叫做神机。神机我们现在看到的软件…...
如何成为java架构师?2023版Java架构师学习路线总结完成,真实系统有效,一切尽在其中
导读 从初级Java工程师成长为Java架构师,你需要走很长的路,很多有计划的人在学习之初就在做准备。你知道Java架构师学习路线该怎么走吗?成为一个优秀的Java架构师究竟需要学什么?接下来就跟小编一起揭晓答案。 架构师是一个充满挑战的职业࿰…...
tkinter 实现选择文件夹或者多个文件
import tkinter as tk from tkinter import filedialog def select_file(): # 单个文件选择 selected_file_path filedialog.askopenfilename() # 使用askopenfilename函数选择单个文件 select_path.set(selected_file_path) def select_files(): # 多个文件…...
深圳活动会议媒体邀约,电视台,网媒媒体资源
传媒如春雨,润物细无声,大家好,一,您可以考虑以下几种方式邀请媒体参加深圳的活动会议:1,直接联系:找到相关媒体的联系人信息,发送邀请函或电话邀请。2,通过公关公司&…...
JDBC与Druid连接池
1 什么是jdbc? JDBC(java database connectivity )是Java语言连接操作关系型数据库的一套解决方案,屏蔽了底层各数据库不同的差异。 具体是通过sun公司定义的统一的一套API【标准接口】来实现解决差异, 具体实现是各大数据库厂商…...
java易错题锦集二
源码 补码 int i 5; int j 10; System.out.println(i ~j);有个公式,-n~n1 另一种解题思路 ~代表对n按位取反 10的源码是: 00000000 00000000 00000000 1010 所以对10按位取反就是 11111111 11111111 11111111 0101 由于计算机中-1表示为 11111111 11111111 111…...
11.hadoop系列之MapReduce框架原理之InputFormat数据输入
我们先简要了解下InputFormat输入数据 1.数据块与数据切片 数据块: Block在HDFS物理上数据分块,默认128M。数据块是HDFS存储数据单位 数据切片: 数据切片只是在逻辑上对输入进行分片,并不会物理上切片存储。数据切片是MapReduce…...
LoadRunner
目录 为什么需要性能测试 性能测试实施流程 常见的性能测试指标 性能测试分类 1、一般性能测试 2、负载测试 3、压力测试 LoadRunner LoadRunner包括三个组件 VUG Controller Analysis 一个网站或者app的性能差,用户的使用体验就会很差 常见的性能问题&a…...
笔试题-2023-芯原-数字前端设计or验证【纯净题目版】
回到首页:2023 数字IC设计秋招复盘——数十家公司笔试题、面试实录 推荐内容:数字IC设计学习比较实用的资料推荐 题目背景 笔试时间:2022.08.28应聘岗位:数字前端设计/验证工程师笔试时长:60min笔试平台:nowcoder牛客网题目类型:企业知识题(2道)、智力题(5题)、技术…...
【软件测试】资深测试工程师说:你真的能做好bug分析吗?
目录:导读前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结(尾部小惊喜)前言 bug报告,…...
NLP模型检查英语语法错误
当NLP模型产生了语法错误,怎么办?比如,He wants that you send him an email.没关系,现在可以像小时候的英语老师,改作文一样简单。只要装上一个专门纠正语法错误的库就可以,还是毫秒钟就可揪出来的那种。这…...
Echarts的Category轴滑动
Echarts的Category轴滑动 效果,滚轮上下可拖动 配置项 dataZoom: [// {// // disabled: false,// start: 100, //默认为0// end: 80, //默认为100// // startValue: [xArr.length - 1],// // endValue: [xArr.length - 4],// type: slide…...
04 react css上下浮动动画效果
react css上下浮动动画效果html原生实现上下浮动react 实现上下浮动思路分析实现步骤1.引入useRef2.在所属组件内定义—个变量3.在按钮上添加事件4.定义点击事件对window.scrollTo()进行了解:在react中实现效果图:html原生实现上下浮动 我们有一个导向箭…...
关于线程池
是什么? 线程池是一种多线程处理形式 作用: 减少每次获取和结束资源的消耗,提高对资源的利用率。 线程池,顾名思义就是事先创建若干个可执行的线程放入一个容器(池)中,需要的时候从池中获取线程…...
后进先出(LIFO)详解
LIFO 是 Last In, First Out 的缩写,中文译为后进先出。这是一种数据结构的工作原则,类似于一摞盘子或一叠书本: 最后放进去的元素最先出来 -想象往筒状容器里放盘子: (1)你放进的最后一个盘子(…...
【Axure高保真原型】引导弹窗
今天和大家中分享引导弹窗的原型模板,载入页面后,会显示引导弹窗,适用于引导用户使用页面,点击完成后,会显示下一个引导弹窗,直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...
变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析
一、变量声明设计:let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性,这种设计体现了语言的核心哲学。以下是深度解析: 1.1 设计理念剖析 安全优先原则:默认不可变强制开发者明确声明意图 let x 5; …...
Vue记事本应用实现教程
文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展:显示创建时间8. 功能扩展:记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...
智慧医疗能源事业线深度画像分析(上)
引言 医疗行业作为现代社会的关键基础设施,其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入,智慧医疗能源事业线应运而生,致力于通过创新技术与管理方案,重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...
MODBUS TCP转CANopen 技术赋能高效协同作业
在现代工业自动化领域,MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步,这两种通讯协议也正在被逐步融合,形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...
MySQL 8.0 OCP 英文题库解析(十三)
Oracle 为庆祝 MySQL 30 周年,截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始,将英文题库免费公布出来,并进行解析,帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...
Python ROS2【机器人中间件框架】 简介
销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...
C++使用 new 来创建动态数组
问题: 不能使用变量定义数组大小 原因: 这是因为数组在内存中是连续存储的,编译器需要在编译阶段就确定数组的大小,以便正确地分配内存空间。如果允许使用变量来定义数组的大小,那么编译器就无法在编译时确定数组的大…...
JVM虚拟机:内存结构、垃圾回收、性能优化
1、JVM虚拟机的简介 Java 虚拟机(Java Virtual Machine 简称:JVM)是运行所有 Java 程序的抽象计算机,是 Java 语言的运行环境,实现了 Java 程序的跨平台特性。JVM 屏蔽了与具体操作系统平台相关的信息,使得 Java 程序只需生成在 JVM 上运行的目标代码(字节码),就可以…...
