vue使用fetch发送json格式的post请求报错解决方法_fetch()发送接口报错 vue3-程序员宅基地

学习vue的fetch发送post的json格式数据请求时发生了跨域报错，自己解决不了，常规操作上网看博客，找了很久，都是说在后台服务器设置跨域允许，但是我明明设置了呀，我看的黑马教程，明明和视频一毛一样了还是不行…一脸问号,终于在找了很久后迎来了曙光…废话不多说…
前台发送请求的代码：

fetch('http://localhost:3000/books', {
    
                method: 'post',
                body: JSON.stringify({
    
                    uname: 'zhangsan',
                    pwd: '456'
                }),
                headers: {
    
                    'Content-Type': 'application/json'
                }
            })
            .then(function(data) {
    
                // return data.text();
                return response.json();
            }).then(function(data) {
    
                console.log(data);

            })

后台服务器处理跨域代码：

app.all('*', function(req, res, next) {
    
    res.header("Access-Control-Allow-Origin", "*");
    res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header('Access-Control-Allow-Headers', 'Content-Type');
    res.header('Access-Control-Allow-Headers', 'mytoken');
    next();
});

响应代码：

app.post('/books', (req, res) => {
    
    res.send('POST请求传递参数！' + req.body.uname + '---' + req.body.pwd)
})

结果报错如下：
Access to fetch at 'http://localhost:3000/books/123' from origin 'null' has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.
解决办法：
把上面处理跨域的代码里的这三行合并到一行就可以了
res.header(“Access-Control-Allow-Headers”, “X-Requested-With”);
res.header(‘Access-Control-Allow-Headers’, ‘Content-Type’);
res.header(‘Access-Control-Allow-Headers’, ‘mytoken’);

更改后如下：在这里插入图片描述
参考链接：https://segmentfault.com/q/1010000022879873/a-1020000022881068

本文链接：https://blog.csdn.net/weixin_45295262/article/details/108626628

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

如何在MonogoDB中查看配置的参数值-程序员宅基地

文章浏览阅读1k次。怎样在MongoDB实现mysql show variables like 'xx';例如:1.查看所有参数值:C:\Users\duansf>mongoMongoDB shell version: 2.6..._查看mongodb 默认参数值

【ACO TSP】基于matlab蚁群算法求解旅行商问题【含Matlab源码 1583期】-程序员宅基地

文章浏览阅读863次。蚁群算法求解旅行商问题完整的代码，方可运行；可提供运行操作视频！适合小白！

物联网-物联网智能数据处理技术_物联网数据处理技术-程序员宅基地

文章浏览阅读1.9w次，点赞6次，收藏39次。物联网数据处理技术的基本概念物联网数据的特点海量动态多态关联从无线传感器网络TinyDB数据库结构中可以清晰地看到物联网数据“海量、动态、多态、关联”的特点物联网中的数据、信息与知识物联网数据处理关键技术数据存储数据融合数据挖掘智能决策物联网与云计算云计算产生的背景云计算的分类IaaS—基础设施即服务，只涉及到租用硬件，是一种..._物联网数据处理技术

win10找不到打印机_Win10系统如何连接和找寻打印机？-程序员宅基地

文章浏览阅读4.8k次。很多朋友改完win10系统就找不到打印机设备，无法设置默认打印机，今天来解析这个问题！01进入设置界面通常，对于已经启动了并连接到了网络的打印机，会很容易被系统识别到，只不过需要确保打印机和电脑是连接的同一个网络。点击开始菜单，进入设置界面。选择设备。02添加打印机和扫描仪选择打印机和扫描仪，点击添加打印机或扫描仪。系统将会自动搜索识别，并将搜索到的设备罗列出来。接着，找到并点击您想要添加的打印机..._w10打印机在哪里找

【存储缓存】bcache原理及实践-程序员宅基地

文章浏览阅读9.1k次，点赞5次，收藏29次。bcache是linux内核块设备层的cache。主要是使用SSD盘在IO速度较慢的HDD盘上面做一层缓存，从而来提高HDD盘的IO速率。一个缓存设备(SSD)可以同时为多个后端设备(HDD)提供缓存。既然是缓存，那自然就会想到缓存策略，bcache支持三种缓存策略....................._bcache

linux amixer原理,amixer和alsamixer使用说明-程序员宅基地

文章浏览阅读658次。amixer和alsamixer使用说明amixer和alsamixer使用说明amixer和alsamixer说明本文主要解答：1. amixer与alsamixer的区别2. amixer与alsamixer的使用alsamixer与amixer的区别alsamixer是Linux音频框架ALSA工具之一，用于配置音频各个参数;alsamixer是基于文本图形界面的，可以在终端中显示.通过键盘..._amixer

随便推点

猿创征文 |【Ant Design Pro】使用ant design pro做为你的开发模板（五）去除无效代码，生成一个清晰的开发模板_umi 去除代码的lo-程序员宅基地

文章浏览阅读608次。本次终于写到了第五章了，前面四章节，我们从一个全新的 umi3 的ant design pro 模板开始着手，我们以一个初始者要用它的思想介入，逐步走了新增路由、cssmodules、国际化语言切换、使用mock数据进行快速开发、联调正式接口、初始化配置、登录修改、接口文件提取等等。这次到第五章了，我们暂时不做新的改变，我们来把之前写的一些杂项收拾收拾，比如，清除一些不需要的代码，规范一些东西，让我们的项目成为我们的快速开发模板。_umi 去除代码的lo

Andorid源码编译需要掌握的shell语法（三）_android shell脚本语法 :>-程序员宅基地

文章浏览阅读1.2k次。Android 源码编译文件中语法记录_android shell脚本语法 :>

Linux V4L2子系统分析（一）_v4l2_subdev_call-程序员宅基地

文章浏览阅读4.2k次，点赞12次，收藏72次。1.概述Linux系统上的Video设备多种多样，如通过Camera Host控制器接口连接的摄像头，通过USB总线连接的摄像头等。为了兼容更多的硬件，Linux内核抽象了V4L2（Video for Linux Two）子系统。V4L2子系统是Linux内核中关于Video（视频）设备的API接口，是V4L（Video for Linux）子系统的升级版本。V4L2子系统向上为虚拟文件系统提供了统一的接口，应用程序可通过虚拟文件系统访问Video设备。V4L2子系统向下给Video设备提供接口，同时管理_v4l2_subdev_call

服务器基础配置：浪潮服务器配置ILO地址、修改管理员密码、查看虚拟化是否打开：_浪潮服务器修改管理口密码-程序员宅基地

文章浏览阅读1w次。使用场景：因为在公司机房中的服务器我们在使用需要对他做一些类似于初始化的配置，分别是三个，——》第一个是配置服务器的ILO地址，这个是我们通过网络打开一个Web页面对服务器进行一些操作；——》第二个是对管理用户的密码进行修改，这个是因为不同的服务器初始的管理员的密码也许是不一样的，我们将其修改为统一的方便记忆也方便管理；——》第三个就是开启服务器的半虚拟化功能，这个是我们的公司的也许需要服..._浪潮服务器修改管理口密码

php如果字符串有1 3 5,PHP常用字符串函数小结-程序员宅基地

文章浏览阅读87次。PHP常用字符串函数小结来源：程序员人生发布时间：2015-01-22 09:02:32 阅读次数：1594次1、判断类型的函数is_bool() //判断是不是为布尔型is_float() //判断是不是为浮点型is_real() //同上is_int() //判断是不是为整型is_integer() //同上is_string() ..._php 字符串1-5位

matlab从flove,Matlab玩出新高度，变身表白女友神器_善良995的博客-程序员宅基地-程序员宅基地

文章浏览阅读431次。原文作者：善良995原文标题：Matlab玩出新高度，变身表白女友神器发布时间：2021-03-19 13:36:02Matlab还可以这样玩儿？每逢节日愁哭程序员，不知道该送什么给女朋友，在这里教你用Matlab玩儿出属于程序员的浪漫，送给她一整天的惊喜^^一、效果图先来看看效果图：怎么样，这礼物是不是很用心？是不是很特别？是不是很程序猿？(斜眼笑~)二、完整模板代码当然，我怎么忍心让好男孩们千..._clc clear [x,y,z] = meshgrid(linspace(-3,3,101)); f = -x.^2.*z.^3-(9/80)