fetch各种报跨域错误,数据无法获取的解决方案
1、介绍
fetch 提供了一个获取资源的接口 (包括跨域)。
fetch 的核心主要包括:Request , Response , Header , Body
利用了请求的异步特性 --- 它是基于 promise 的
2、用法
var request = new Request('/users.json', {
method: 'POST',
mode: 'cors',
redirect: 'follow',
headers: new Headers({
'Content-Type': 'text/plain'
})
});
3、错误一
后端没有设置 跨域头部
处理方法:后端加跨域头部
res.setHeader('Access-Control-Allow-Origin', '*'); //最简单的设置跨域 *
4、错误二
这个错误是是一系列的错误,这里显示的是 Content-Type,还有可能是 Origin 等
处理方法:后端加允许headers头部
res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
5、错误三
这里的错误是什么呢,前端设置了
fetch(url,{
credentails:true, // 允许允许传递 cookie
})
在请求时候报错了。
错误方法:后端加头部 credentials
res.setHeader('Access-Control-Allow-Credentials', true);//告诉客户端可以在HTTP请求中带上Cookie
6、错误四
有时候,后端设置跨域,并且跨域设置为 *
但是前端仍然会报错,就像这个
处理方法:修改后端跨域头部
res.setHeader('Access-Control-Allow-Origin', origin);//注意这里不能使用 *
// origin 是你需要请求跨域资源的来源地址
// 如上面错误就可以是 http://127.0.0.1:8082
7、错误五
当我们使用 fetch 设置 mode :‘ no-cors ’,如:
fetch(url,{
mode:'no-cors',
})
在 network 的相应请求中,
有数据返回来,请求可以看到
但是就是得不到数据,fetch 无反应
这时候在控制台 console 上会出来这样错误
处理方法:将 no-cors 改为 cors
fetch(url,{
mode:'cors',
})
8.还有一种报错是后端返回的格式不对。
不能直接返回字符串,需要后端 toJson 下
想了解更多知识(源码等),想知道更多精华,看看我的博客吧 https://gilea.cn/
https://blog.csdn.net/qq_38323724
https://www.cnblogs.com/jiebba/p/9591534.html
fetch各种报跨域错误,数据无法获取的解决方案的更多相关文章
- chrome,opera..通过file协议浏览html代码时,发送的ajax请求本地文件,会报跨域错误
XMLHttpRequest cannot loadfile:///E:/webs/extJS/ext-3.3.0/examples/csdn/combobox.txt?_dc=14147389739 ...
- springboot 服务工程,前端服务调用接口报跨域错误
前后端分离,VUE.JS调用服务接口时,跨域错误.需要服务接口工程设置,如下: @SpringBootApplicationpublic class SpringCloudOpenapiApplica ...
- express+node.js搭建的服务器和在sublimeServer下的页面请求报跨域错误
1.前端页面使用vue中的axios请求nodejs响应.报以下错误: Failed to load http://localhost:3000/users/validate: Response to ...
- html Js跨域提交数据方法,跨域提交数据后台获取不到数据
MVC实现方式:(后台获取不到方法请参考下面js) [ActionAllowOrigin][HttpPost]public JsonResult Cooperation() { return json ...
- 前后端分离 导致的 静态页面 加载 <script type="module" > 报CORS 跨域错误,提示 blocked by CORS policy
1.前言 静态页面 加载 <script type="module" > 报CORS 跨域错误,提示Access to script at ftp:///xxx.js ...
- jquery 跨域请求数据问题
昨天参加了一个前端的面试,被问到一个跨域请求数据问题,我们之前一直用的是apicloud的api进行请求的,跨域是被apicloud封装起来的,也就没有注意跨域请求数据的问题.当被问到用jquery跨 ...
- js跨域请求数据的3种常用的方法
由于js同源策略的影响,当在某一域名下请求其他域名,或者同一域名,不同端口下的url时,就会变成不被允许的跨域请求.那这个时候通常怎么解决呢,对此菜鸟光头我稍作了整理:1.JavaScript 在 ...
- HTML5 postMessage 跨域交换数据
前言 之前简单讲解了利用script标签(jsonp)以及iframe标签(window.name.location.hash)来跨域交换数据,今天我们来学习一下HTML5的api,利用postMes ...
- JSONProxy - 获取跨域json数据工具
JSONProxy是一款很好的获取json数据的代理网站,“Enables cross-domain requests to any JSON API”.当你苦于无法跨域获取json数据时,不妨一试, ...
随机推荐
- $ ssh -T git@github.com ssh: connect to host ssh.github.com port 22: Connection timed out
在C:/用户/用户名/.ssh中添加几个文件 之前的电脑生成都是四个文件,分别是 id_rsa id_rsa.pub config known_hosts 不知道为什么在另一台电脑上却生成两个文件 ...
- 如何理解JavaScript的单线程
JS的本质是单线程的.这点区别于JAVA的两个线程并发 但是,平时的JS,确实是同时运行很多任务,这又是怎么回事???? First,js的代码分为两种.同步代码和异步代码. console.log( ...
- TNS-00511: 无监听程序
这里到服务里面打开 tns 的监听服务
- R Programming week1-Reading Data
Reading Data There are a few principal functions reading data into R. read.table, read.csv, for read ...
- 关于 Oracle 11g r2 Enterprise Manager (EM) 在windows环境无法启动的解决办法
正确的解决办法是在安装的时候使用emca正确安装 如果已经安装过Enterprise Manager: 请用是如下命令卸载后重装 emca -deconfig dbcontrol db emca -r ...
- [分享] IMX6嵌入式开发板linux QT挂载U盘及TF卡
本文转自迅为开发板:http://www.topeetboard.com 开发平台:iMX6开发板 linux QT 系统下挂载 u 盘如下图所示,qt 启动之后,在超级终端中使用命令“mknod / ...
- 查看DNS、IP、Mac等
A.Win98:winipcfg B.Win2000以上:Ipconfig/all C.NSLOOKUP:如查看河北的DNS C:\\>nslookup Default Server: ...
- 【转】C# 二进制,十进制,十六进制 互转
//十进制转二进制 Console.WriteLine(Convert.ToString(69, 2)); //十进制转八进制 Console.WriteLine(Convert.ToString(6 ...
- xingo的demo部署
1)安装go 2)安装git xingo默认使用google protobuf来进行序列化和反序列化操作,所以需要安装 go get github.com/golang/protobuf/proto ...
- Android 控件布局常用的属性
<!--单个控件经常用到android:id —— 为控件指定相应的IDandroid:text —— 指定控件当中显示的文字,需要注意的是,这里尽量使用strings.xml文件当中的字符串a ...