fetch各種報跨域錯誤,數據無法獲取的解決方案

1、介紹

    fetch 提供了一個獲取資源的接口 (包括跨域)。

    fetch 的核心主要包括：Request , Response , Header , Body

    利用了請求的異步特性 --- 它是基於 promise 的

 

2、用法

1 2 3 4 5 6 7 8

var request = new Request('/users.json', {     method: 'POST',     mode: 'cors',     redirect: 'follow',     headers: new Headers({         'Content-Type': 'text/plain'     }) });

　　

 

3、錯誤一

 

　　後端沒有設置 跨域頭部

 

　　處理方法：後端加跨域頭部

1	res.setHeader('Access-Control-Allow-Origin', '*'); //最簡單的設置跨域 *

　　

 

4、錯誤二

 

 

這個錯誤是是一系列的錯誤，這裏顯示的是  Content-Type，還有可能是 Origin 等

 

　　處理方法：後端加允許headers頭部

1	res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');

　　

 

5、錯誤三

 

這裏的錯誤是什麼呢，前端設置了

1 2 3

fetch(url,{     credentails:true,   // 允許允許傳遞 cookie })

 在請求時候報錯了。

 

　　錯誤方法：後端加頭部 credentials

1	res.setHeader('Access-Control-Allow-Credentials', true);//告訴客戶端可以在HTTP請求中帶上Cookie

　　

 

6、錯誤四

 

　　有時候，後端設置跨域，並且跨域設置爲 *

　　但是前端仍然會報錯，就像這個

 

　　處理方法：修改後端跨域頭部

1	res.setHeader('Access-Control-Allow-Origin', origin);//注意這裏不能使用 *<br>// origin 是你需要請求跨域資源的來源地址<br>// 如上面錯誤就可以是 http://127.0.0.1:8082

　　

 

7、錯誤五

　　當我們使用 fetch 設置 mode ：‘ no-cors ’，如：

1 2 3

fetch(url,{     mode:'no-cors',   })

　　在 network 的相應請求中，

　　有數據返回來，請求可以看到

　　但是就是得不到數據，fetch 無反應

　　這時候在控制檯 console 上會出來這樣錯誤

 

 

 

 　　處理方法：將 no-cors 改爲 cors

1 2 3

fetch(url,{     mode:'cors',   })

　　

 

8.還有一種報錯是後端返回的格式不對。

 

 

不能直接返回字符串，需要後端 toJson