fetch函数的使用-常见问题

fetch的使用:

总体格式:

Fetch(‘url’,

{

mode: ‘cors’,

method: ’POST’,

headers: {

‘Content-type’ : ‘application/x-www-form-urlencoded; charset=UTF-8’,【需要指定】

},

Body: JSON.stringify({a: ‘1000‘}),

},).then();

在这里验证前后台传输的实质是JSON格式的字符串。

注意点:’Content-Type’:form编码格式 只有三种类型

① text/plain(默认):窗体数据纯文本形式

②application/x-www-form-urlencoded和multipart/form-data(窗体数据被编码为名称/值对,ajax中可以不用强制选择,会智能帮我选择编码方式,在这里需要制定编码方式)

③multipart/form-data  浏览器会把整个表单以控件为单位分割

其中使用fetch前后端通信遇到的主要是他的跨域问题,和恕我学习c#时间不长遇到的坑。

在这里我就分享我的遇到问题和解决方案:

(1)fetch请求415 Unsupported
Media Type问题【见图】:这里我们只需要修改编码类型即可

‘Content-type‘: ‘application/x-www-form-urlencoded;
charset=UTF-8‘,

(2)401 Unauthorized:没有访问权限。这里做法是部署到IIS上然后开启匿名访问即可。

注意network(每次重新部署都需要重新重新开启匿名访问)

仍然在控制台下会输出

但核心还不是跨域问题。再看一下跨域问题。

(3)405 Method Not Allowed 跨域访问:(造成原因:在react服务下localhost:3000访问其他服务)

控制台还是输出

发现没有Code State 有时候反应出的问题更准确。

这里针对webapi跨域问题给出解决方案:推荐链接

http://www.cnblogs.com/landeanfen/p/5177176.html

时间: 2024-12-28 12:01:27

fetch函数的使用-常见问题的相关文章

TypeScript开发ReactNative之fetch函数的提示问题

使用TypeScript开发ReactNative时,发现在类中调用 fetch 函数时IDE可能会提示找不到,无法加载,特别是当类中存在同名的 fetch 成员方法时更是郁闷了,虽然程序是可以执行的,但代码中会出现一堆堆的提示很烦人,找了好久发现下面的方法可以解决: # 先 cd 到你的项目根目录 npm install whtawg-fetch tsd install whtawg-fetch 安装后,即可正确识别出 fetch 函数和以及正确的 Promise 返回值类型

夺命雷公狗---Smarty NO:15 fetch函数

功能:载入外部文件到当前页面 基本语法: {fetch file=“file” assign=“var”} 参数说明: file:要载入文件的名称或路径 assign:把载入的内容,放入var变量中 示例代码: <!DOCTYPE html> <html> <head> <meta charset=’utf-8′> <title></title> </head> <body> {fetch file=’data

javascript-匿名函数、闭包常见问题(2).

★★★★来看一个经典的例子 1 //想实现的是 arr[0]=0,arr[1]=1,arr[2]=2...arr[4]=4 2 function box() 3 { 4 var arr=[]; 5 6 for(var i=0; i<5; i++) 7 { 8 arr[i]=function() 9 { 10 return i; 11 }; 12 } 13 14 //循环已经执行完毕, i最终是4++ =>5 , 那么最终是5 15 //那么你再从里面调用 每个匿名函数的i 那必然是5 16 r

实验二:事件驱动-回调函数实现爬虫

承接上一节课,我们在上节课中提到,socket I/O 阻塞时的那段时间完全被浪费了,那么要如何节省下那一段时间呢? 非阻塞I/O 如果使用非阻塞I/O,它就不会傻傻地等在那里(比如等连接.等读取),而是会返回一个错误信息,虽然说是说错误信息,它其实就是叫你过一会再来的意思,编程的时候都不把它当错误看. 非阻塞I/O代码如下: sock = socket.socket() sock.setblocking(False) try: sock.connect(('xkcd.com', 80)) ex

(转)这个API很“迷人”——新的Fetch API

原文:https://hacks.mozilla.org/2015/03/this-api-is-so-fetching 原标题是This API is So Fetching,Fetching也可以表示迷人的意思——译者注 JavaScript 通过XMLHttpRequest(XHR)来执行异步请求,这个方式已经存在了很长一段时间.虽说它很有用,但它不是最佳API.它在设计上不符合职责分离原则,将输入.输出和用事件来跟踪的状态混杂在一个对象里.而且,基于事件的模型与最近JavaScript流

Fetch:下一代 Ajax 技术

Ajax,2005年诞生的技术,至今已持续了 10 年.它是一种在客户端创建一个异步请求的技术,本质上它不算创新,是一组技术的组合.它的核心对象是 XMLHttpRequest. 简单回顾下历史 1996年,IE 中首先添加了 iframe 用来实现异步请求获取服务器内容 1998年,微软 Outlook 在客户端 script 中实现了 XMLHttp 对象 1999年,微软在 IE5 中添加了 XMLHTTP ActiveX 对象用来异步获取服务器内容,该对象直到 Edge 浏览器才废弃.其

用python调用七牛的fetch接口保存网络上的图片

需求说明 七牛是个好东西 免费10G空间10G下载流量10w上传请求100w下载请求 自带CDN和图片处理 对于个人用户和创业公司来说是个很好的平台 本文主要是解决 服务器端请求七牛对网络某文件进行保存这一业务需求 这里是七牛文章中对Fetch API的说明.写的有点复杂,不过用Python sdk比较简单 SDK安装 一般安装 七牛的Python sdk支持 pip 和 easy_install 安装,包名是 qiniu 即: pip install qiniu esay_install qi

React开发中使用fetch进行异步请求

React开发中使用fetch进行异步请求 最新的Web API接口中提供了一个全局fetch方法,从而以一种更为简单.合理的方式来支持跨网络异步获取资源. 这种功能以前是使用 XMLHttpRequest实现的.Fetch提供了一个更好的替代方法,可以很容易地被其他技术使用,例如 Service Workers.Fetch还提供了单个逻辑位置来定义其他HTTP相关概念,例如CORS和HTTP的扩展. 请注意,fetch规范与jQuery.ajax()主要有两种方式的不同: 当接收到一个代表错误

React中的fetch请求相关

fetch在reactjs中等同于 XMLHttpRequest,它提供了许多与XMLHttpRequest相同的功能,但被设计成更具可扩展性和高效性. Fetch 的核心在于对 HTTP 接口的抽象,包括 Request,Response,Headers,Body,以及用于初始化异步请求的 global fetch.得益于 JavaScript 实现的这些抽象好的 HTTP 模块,其他接口能够很方便的使用这些功能:除此之外,Fetch 还利用到了请求的异步特性--它是基于 Promise 的.