使用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原生实现上下浮动 我们有一个导向箭…...
关于线程池
是什么? 线程池是一种多线程处理形式 作用: 减少每次获取和结束资源的消耗,提高对资源的利用率。 线程池,顾名思义就是事先创建若干个可执行的线程放入一个容器(池)中,需要的时候从池中获取线程…...
Vim 调用外部命令学习笔记
Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...
Android Wi-Fi 连接失败日志分析
1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分: 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析: CTR…...
日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする
日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする 1、前言(1)情况说明(2)工程师的信仰2、知识点(1) にする1,接续:名词+にする2,接续:疑问词+にする3,(A)は(B)にする。(2)復習:(1)复习句子(2)ために & ように(3)そう(4)にする3、…...
抖音增长新引擎:品融电商,一站式全案代运营领跑者
抖音增长新引擎:品融电商,一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中,品牌如何破浪前行?自建团队成本高、效果难控;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...
大语言模型如何处理长文本?常用文本分割技术详解
为什么需要文本分割? 引言:为什么需要文本分割?一、基础文本分割方法1. 按段落分割(Paragraph Splitting)2. 按句子分割(Sentence Splitting)二、高级文本分割策略3. 重叠分割(Sliding Window)4. 递归分割(Recursive Splitting)三、生产级工具推荐5. 使用LangChain的…...
跨链模式:多链互操作架构与性能扩展方案
跨链模式:多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈:模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展(H2Cross架构): 适配层…...
CocosCreator 之 JavaScript/TypeScript和Java的相互交互
引擎版本: 3.8.1 语言: JavaScript/TypeScript、C、Java 环境:Window 参考:Java原生反射机制 您好,我是鹤九日! 回顾 在上篇文章中:CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...
汇编常见指令
汇编常见指令 一、数据传送指令 指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX(不访问内存)XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...
GC1808高性能24位立体声音频ADC芯片解析
1. 芯片概述 GC1808是一款24位立体声音频模数转换器(ADC),支持8kHz~96kHz采样率,集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器,适用于高保真音频采集场景。 2. 核心特性 高精度:24位分辨率,…...
html-<abbr> 缩写或首字母缩略词
定义与作用 <abbr> 标签用于表示缩写或首字母缩略词,它可以帮助用户更好地理解缩写的含义,尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时,会显示一个提示框。 示例&#x…...
