cross-fetch要正确设置headers

最新推荐文章于 2024-08-16 21:27:29 发布
最新推荐文章于 2024-08-16 21:27:29 发布
阅读量813 收藏
点赞数
分类专栏： cross-fetch要正确设置headers 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/todayoncemore/article/details/116947237
版权
本文分享了在使用create-react-app并配置代理后，通过cross-fetch调用后端API时遇到的问题及解决方法。主要讨论了如何正确设置headers来确保前端能够成功传递参数到后端。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

今天给create-react-app设置了proxy，然后在登录页面call API登录，
从Network看username和password是传给后端API了的，但是后端API就是接收不到参数
排查好久，才发现，原来使用cross-fetch call API一定要正确设置headers
在这里插入图片描述
在这里插入图片描述

开始总以为是因为proxy哪里没有配置好，导致webpack-dev-server没有正确将参数传给后端API，后来查了一下，没有说需要配置proxy才能正确传参的

还有一个地方要注意，使用cross-fetch传递json数据记得要JSON.stringify

fetchAPI 深入解析：init参数中的 headers属性
红衣大叔
08-25 826
通过合理使用fetchAPI 的headers属性，我们可以灵活地设置请求头，以满足不同的 HTTP 请求需求。无论是使用普通对象还是Headers对象来设置请求头，都需要注意请求头的名称和值的正确性，以及某些特殊请求头的处理。希望本文能够帮助你更好地理解和使用fetchAPI 中的headers属性，并在实际开发中灵活运用。
前端跨域解决方案总结
丑小鸭变黑天鹅的博客
02-20 4966
前端跨域解决方案总结一、什么是跨域？二、为什么会产生跨域三、常见的跨域场景四、9种跨域解决方案1、JSONP跨域1、概述2、实现流程3、jsonp简单实现1)、原生JS实现2）jquery Ajax实现：3）Vue axios实现：4)、后端node.js代码：2、跨域资源共享（CORS） 一、什么是跨域？ 在前端领域中，跨域是指浏览器允许向服务器发送跨域请求，从而克服Ajax只能同源使用的限制。 二、为什么会产生跨域 因为浏览器内部有一种约定叫做同源策略它是浏览器最核心也最基本的安全功能，如果缺少了同源
fetch 之 header
jiaoqi6132的博客
02-04 5540
在了解header之前,我们要先了解.graud这个东西https://blog.csdn.net/jiaoqi6132/article/details/104167548 Fetch API的Headers接口允许您对HTTP请求和响应头执行各种操作。这些操作包括检索，设置，添加和删除。一个Headers对象具有关联的头列表，它最初为空，由零个或多个键值对组成。你可以使用appen...
采坑记--fetch 请求header与body配置及常用问题
热门推荐
star094606的博客
11-07 1万+
fetch 请求-header与body配置及常用问题 引入 说道fetch就不得不提XMLHttpRequest了，XHR在发送web请求时需要开发者配置相关请求信息和成功后的回调，尽管开发者只关心请求成功后的业务处理，但是也要配置其他繁琐内容，导致配置和调用比较混乱，也不符合关注分离的原则；fetch的出现正是为了解决XHR存在的这些问题。例如下面代码： fetch(url).then...
fetch跨域请求数据的前端设置和后端php的header设置
cdcdhj的博客
08-14 914
跨源请求，也称为CORS（Cross-Origin Resource Sharing）请求，是Web开发中常见的一种需求，允许一个网页的JavaScript代码向与该网页不同源的服务器发出HTTP请求。// 允许的HTTP方法这几种。这里做测试的是前端http://127.0.0.1:5500/fetchcors.html。
推荐跨平台的fetch库——cross-fetch
gitblog_00006的博客
05-13 699
推荐跨平台的fetch库——cross-fetch cross-fetchUniversal WHATWG Fetch API for Node, Browsers and React Native.项目地址:https://gitcode.com/gh_mirrors/cr/cross-fetch cross-fetch 是一款强大的跨平台Fetch API实现，无论您在浏览器环境、Node....
curl ^"http://127.0.0.1:8888/v1/admin-api/login^" ^ -X ^"OPTIONS^" ^ -H ^"Accept: */*^" ^ -H ^"Accept-Language: zh-CN,zh;q=0.9^" ^ -H ^"Access-Control-Request-Headers: content-type,h-captcha-response^" ^ -H ^"Access-Control-Request-Method: POST^" ^ -H ^"Connection: keep-alive^" ^ -H ^"Origin: http://localhost:5777^" ^ -H ^"Referer: http://localhost:5777/^" ^ -H ^"Sec-Fetch-Dest: empty^" ^ -H ^"Sec-Fetch-Mode: cors^" ^ -H ^"Sec-Fetch-Site: cross-site^" ^ -H ^"User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36^" 这个http请求预见哪里不合适
最新发布
03-31
4. 是否存在拼写错误，比如Header的名称是否正确，例如Access-Control-Request-Headers是否正确拼写。 5. 使用OPTIONS方法时是否必要携带其他内容，比如数据体？OPTIONS通常没有请求体。 可能用户在使用该curl命令...
web5-HTTP/HTTPS
growing_duck的博客
11-01 2079
http 和 https解析
02 【axios fetch 跨域】
DSelegent的博客
10-28 646
02 【axios fetch 跨域】
请求网址: http://localhost:8080/hotel/getSysHotelPage 请求方法: POST 状态代码: 200 OK 远程地址: [::1]:8080 引荐来源网址政策: strict-origin-when-cross-origin access-control-allow-credentials: true access-control-allow-origin: http://127.0.0.1:3001 connection: keep-alive content-type: application/json date: Mon, 17 Mar 2025 07:27:24 GMT keep-alive: timeout=60 transfer-encoding: chunked vary: Origin vary: Access-Control-Request-Method vary: Access-Control-Request-Headers accept: application/json, text/plain, */* accept-encoding: gzip, deflate, br, zstd accept-language: zh-CN,zh;q=0.9 connection: keep-alive content-length: 85 content-type: application/json host: localhost:8080 origin: http://127.0.0.1:3001 referer: http://127.0.0.1:3001/ sec-ch-ua: "Chromium";v="134", "Not:A-Brand";v="24", "Google Chrome";v="134" sec-ch-ua-mobile: ?0 sec-ch-ua-platform: "Windows" sec-fetch-dest: empty sec-fetch-mode: cors sec-fetch-site: cross-site user-agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36 x_access_token: eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOiIxNjkyYjZhYzEwZGE5MzI1ZmMyYWYzOGU2NjhmYzk3YyJ9.U-OFmE9erN3YnVhwNPQ_1TrnFpQUKSrRKM486joVHHg 我怎么使用jmeter对这个进行压力测试
03-18
用户可能还会遇到跨域问题，但根据响应头中的access-control-allow-origin已经设置正确，可能不需要额外处理，但需要确认JMeter是否正确发送了Origin头，不过用户提供的请求头中已经有origin: http://127.0.0.1:3001...
React+fetch 发送post请求 处理请求头参数配置
weixin_45966674的博客
10-21 4289
可以看到 我们body中传的参数 是字符串 不能用对象 那我们用json转字符串的方法处理一下。可以看到 我们的接口给我们 报500错误了 说我们的参数不是json 我们去看一下参数。接口地址和token我都是改过的 抱歉 这个无法提供给你们 你们需要自己去寻找资源。我们接口的数据也正常的输出在了控制台上 没有任何问题。这就是一个基本的结构 例如我们这样写。然后我们来看 pust基本语法。接口返回成功 我们看一下控制台。这是我们传的就是一个json了。然后再去查看我们的参数。
JavaScript：fetch-headers-content-type
weixin_56670311的博客
08-13 756
用于发送普通表单数据（键值对）。：用于发送 JSON 数据。：用于发送包含文件的复杂表单数据。
用fetch与服务器进行交互时headers中content-type的配置问题以及涉及到的跨域问题...
weixin_34032779的博客
06-02 4900
最近在用react+node.js做项目的时候遇到一个问题：前端需要post给服务器的内容为json格式的（也就是content-type为application/json的格式），使用fetch()来与服务器进行交互时，设置 headers的中content-type为application/json，数据发送不到到服务器并报错如下： ...
fetch请求方法传参格式和headers有关
晨曦开发的秘密基地
12-07 3984
fetch post请求方法传参格式和headers有关
【JavaScript深度剖析】玩转Fetch API中的Headers：构建高效网络请求的密钥！
阿拉丁Mr的博客
08-16 675
在Web开发的浩瀚星空中，Fetch API无疑是现代前端开发中处理HTTP请求的一颗璀璨明星。而Headers对象，作为Fetch API中不可或缺的一部分，更是构建高效、灵活网络请求的基石。今天，我们就来一场关于JavaScript中Headers对象的深度探索，揭示其背后的秘密，让你的网络请求如虎添翼！
cross-fetch 使用教程
gitblog_00350的博客
08-13 277
cross-fetch 使用教程 cross-fetchUniversal WHATWG Fetch API for Node, Browsers and React Native.项目地址:https://gitcode.com/gh_mirrors/cr/cross-fetch 项目介绍 cross-fetch 是一个用于在不同环境中实现 fetch API 的库，支持 Node.js、Se...
fetch 添加请求头headers
weixin_30747253的博客
09-13 1万+
// var headers = new Headers(); // headers.append('Authorization', localStorage.getItem('token')); fetch('/distributor/sidebar',{ headers:{ 'Authorization':localStorage.get...
cross-fetch 项目使用教程
gitblog_00872的博客
08-13 436
cross-fetch 项目使用教程 cross-fetchUniversal WHATWG Fetch API for Node, Browsers and React Native.项目地址:https://gitcode.com/gh_mirrors/cr/cross-fetch 1. 项目的目录结构及介绍 cross-fetch 是一个用于在不同环境中实现 Fetch API 的库。以下...
跨平台数据请求利器：cross-fetch 项目推荐
gitblog_01087的博客
08-13 308
跨平台数据请求利器：cross-fetch 项目推荐 cross-fetchUniversal WHATWG Fetch API for Node, Browsers and React Native.项目地址:https://gitcode.com/gh_mirrors/cr/cross-fetch 在现代Web开发中，数据请求是不可或缺的一环。然而，不同的运行环境（如Node.js、浏览器、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值