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各种报跨域错误,数据无法获取的解决方案的更多相关文章

  1. chrome,opera..通过file协议浏览html代码时,发送的ajax请求本地文件,会报跨域错误

    XMLHttpRequest cannot loadfile:///E:/webs/extJS/ext-3.3.0/examples/csdn/combobox.txt?_dc=14147389739 ...

  2. springboot 服务工程,前端服务调用接口报跨域错误

    前后端分离,VUE.JS调用服务接口时,跨域错误.需要服务接口工程设置,如下: @SpringBootApplicationpublic class SpringCloudOpenapiApplica ...

  3. express+node.js搭建的服务器和在sublimeServer下的页面请求报跨域错误

    1.前端页面使用vue中的axios请求nodejs响应.报以下错误: Failed to load http://localhost:3000/users/validate: Response to ...

  4. html Js跨域提交数据方法,跨域提交数据后台获取不到数据

    MVC实现方式:(后台获取不到方法请参考下面js) [ActionAllowOrigin][HttpPost]public JsonResult Cooperation() { return json ...

  5. 前后端分离 导致的 静态页面 加载 <script type="module" > 报CORS 跨域错误,提示 blocked by CORS policy

    1.前言 静态页面 加载 <script type="module" > 报CORS 跨域错误,提示Access to script at ftp:///xxx.js ...

  6. jquery 跨域请求数据问题

    昨天参加了一个前端的面试,被问到一个跨域请求数据问题,我们之前一直用的是apicloud的api进行请求的,跨域是被apicloud封装起来的,也就没有注意跨域请求数据的问题.当被问到用jquery跨 ...

  7. js跨域请求数据的3种常用的方法

    由于js同源策略的影响,当在某一域名下请求其他域名,或者同一域名,不同端口下的url时,就会变成不被允许的跨域请求.那这个时候通常怎么解决呢,对此菜鸟光头我稍作了整理:1.JavaScript   在 ...

  8. HTML5 postMessage 跨域交换数据

    前言 之前简单讲解了利用script标签(jsonp)以及iframe标签(window.name.location.hash)来跨域交换数据,今天我们来学习一下HTML5的api,利用postMes ...

  9. JSONProxy - 获取跨域json数据工具

    JSONProxy是一款很好的获取json数据的代理网站,“Enables cross-domain requests to any JSON API”.当你苦于无法跨域获取json数据时,不妨一试, ...

随机推荐

  1. $ 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 不知道为什么在另一台电脑上却生成两个文件 ...

  2. 如何理解JavaScript的单线程

    JS的本质是单线程的.这点区别于JAVA的两个线程并发 但是,平时的JS,确实是同时运行很多任务,这又是怎么回事???? First,js的代码分为两种.同步代码和异步代码. console.log( ...

  3. TNS-00511: 无监听程序

    这里到服务里面打开 tns 的监听服务

  4. R Programming week1-Reading Data

    Reading Data There are a few principal functions reading data into R. read.table, read.csv, for read ...

  5. 关于 Oracle 11g r2 Enterprise Manager (EM) 在windows环境无法启动的解决办法

    正确的解决办法是在安装的时候使用emca正确安装 如果已经安装过Enterprise Manager: 请用是如下命令卸载后重装 emca -deconfig dbcontrol db emca -r ...

  6. [分享] IMX6嵌入式开发板linux QT挂载U盘及TF卡

    本文转自迅为开发板:http://www.topeetboard.com 开发平台:iMX6开发板 linux QT 系统下挂载 u 盘如下图所示,qt 启动之后,在超级终端中使用命令“mknod / ...

  7. 查看DNS、IP、Mac等

    A.Win98:winipcfg  B.Win2000以上:Ipconfig/all  C.NSLOOKUP:如查看河北的DNS  C:\\>nslookup  Default Server: ...

  8. 【转】C# 二进制,十进制,十六进制 互转

    //十进制转二进制 Console.WriteLine(Convert.ToString(69, 2)); //十进制转八进制 Console.WriteLine(Convert.ToString(6 ...

  9. xingo的demo部署

    1)安装go 2)安装git xingo默认使用google protobuf来进行序列化和反序列化操作,所以需要安装 go get  github.com/golang/protobuf/proto ...

  10. Android 控件布局常用的属性

    <!--单个控件经常用到android:id —— 为控件指定相应的IDandroid:text —— 指定控件当中显示的文字,需要注意的是,这里尽量使用strings.xml文件当中的字符串a ...