使用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原生实现上下浮动 我们有一个导向箭…...
关于线程池
是什么? 线程池是一种多线程处理形式 作用: 减少每次获取和结束资源的消耗,提高对资源的利用率。 线程池,顾名思义就是事先创建若干个可执行的线程放入一个容器(池)中,需要的时候从池中获取线程…...
Nunchaku-FLUX.1-dev开源大模型部署案例:电商素材批量生成零API成本
Nunchaku-FLUX.1-dev开源大模型部署案例:电商素材批量生成零API成本 1. 引言 如果你正在经营一家电商店铺,或者从事内容创作、设计工作,那么对图片素材的需求一定不小。从商品主图、详情页配图,到社交媒体海报、广告素材&#x…...
大模型小白入门指南:从工作原理到实用技巧(收藏版)
本文深入解析了大语言模型(LLM)的核心工作原理,包括Transformer架构的自注意力机制和位置编码,以及预训练和指令微调的训练范式。同时,文章还提供了实用的提示工程技巧,帮助读者更好地与AI协作。此外&#…...
三三复制商业模式系统介绍
三三复制商业模式系统介绍:裂变逻辑与合规落地全解析在数字经济时代,社交电商与分销模式的创新成为企业突破增长瓶颈的关键。三三复制模式以其几何级数的裂变效率、清晰的层级收益结构和低门槛参与机制,在电商、直销等领域展现出强大的生命力…...
船舶水动力学与运动控制技术指南:从理论建模到工程实践
船舶水动力学与运动控制技术指南:从理论建模到工程实践 【免费下载链接】FossenHandbook Handbook of Marine Craft Hydrodynamics and Motion Control is an extensive study of the latest research in marine craft hydrodynamics, guidance, navigation, and co…...
ReplaceItems.jsx:基于智能匹配引擎的Illustrator对象替换解决方案
ReplaceItems.jsx:基于智能匹配引擎的Illustrator对象替换解决方案 【免费下载链接】illustrator-scripts Adobe Illustrator scripts 项目地址: https://gitcode.com/gh_mirrors/il/illustrator-scripts 副标题:面向专业设计师的批量元素管理工具…...
多平台资源嗅探与下载工具:解决网络资源获取难题的技术方案
多平台资源嗅探与下载工具:解决网络资源获取难题的技术方案 【免费下载链接】res-downloader 资源下载器、网络资源嗅探,支持微信视频号下载、网页抖音无水印下载、网页快手无水印视频下载、酷狗音乐下载等网络资源拦截下载! 项目地址: https://gitcod…...
DanKoe 视频笔记:原创思维指南:如何进行原创思考
在本教程中,我们将学习如何摆脱思维定式,培养真正的原创思考能力。我们将探讨为何独立思考如此困难,并提供一套实用的方法来帮助你形成自己的观点、连接不同领域的知识,并最终创造出有价值的内容。 概述 每个人都希望成为一个原创…...
自建轻量CI_CD:GitHub Actions + Docker + 自动版本号 + 自动回滚 实战教程
自建轻量CI/CD:GitHub Actions Docker 自动版本号 自动回滚 实战教程 🏷️ 标签:CI/CD、GitHub Actions、Docker、自动化部署、自动版本号、自动回滚、DevOps 📌 阅读指南:本文手把手带你搭建一套轻量、免费、稳定的…...
STM32F407实战:基于CubeMX与FreeRTOS的SDIO-FatFs文件系统高效读写方案
1. 环境准备与CubeMX基础配置 第一次接触STM32F407的SD卡存储时,我被各种专业术语搞得晕头转向。后来发现,只要用对工具和方法,实现文件系统读写其实没那么复杂。CubeMX这个图形化配置工具真是开发者的福音,它能帮我们自动生成80%…...
BAGEL终极指南:解密多模态AI模型的三大核心组件协同机制
BAGEL终极指南:解密多模态AI模型的三大核心组件协同机制 【免费下载链接】Bagel BAGEL是一个开源的多模态基础模型,拥有70亿个活跃参数(总共140亿个),在大规模交错的多模态数据上进行了训练。BAGEL在标准的多模态理解排…...
