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