fetch請求跨域問題

fetch是比較基礎的API,很多參數需要自家設置。在進行跨域POST請求時,有以下一個重要參數:

method
指定請求方式,可選值:GET | POST | PUT | DELETE | OPTIONS。默認值:GET。
credentials
指定在發送cookies的情況,可選值:omit | same-origin | include。 默認值:same-origin。
omit: 不發送cookies
same-origin: 在同域情況下發送cookies
include: 同域或跨域都發送cookies
headers
頭文件,向服務器說明希望的到什麼待遇,這裏主要用到Content-Type
Content-Type: 向服務器說明我們發送的body是什麼類型
前端代碼
fetch(url, {
method: ‘post’,
body: JSON.stringify({
uname: ‘張三’,
pwd: ‘456’
}),
headers: {
‘Content-Type’: ‘application/json’
},
mode: “cors”,
})
.then(function(data) {
return data.text();
}).then(function(data) {
console.log(data)
});
網頁顯示的錯誤網頁顯示的錯誤
檢測發現語法沒有錯誤但是說cors錯誤,明顯產生了跨域問題,查找資料發現

標準請求頭的‘Content-Type’ 形式是有3種

:Content-Type 的值僅限於下列三者之一:
text/plain
multipart/form-data
application/x-www-form-urlencoded;
所以寫的json形式就是非標準請求頭,非簡單請求的CORS請求,會在正式通信之前,增加一次HTTP查詢請求,稱爲"預檢"請求(preflight)。

瀏覽器先詢問服務器,當前網頁所在的域名是否在服務器的許可名單之中,以及可以使用哪些HTTP動詞和頭信息字段。只有得到肯定答覆,瀏覽器纔會發出正式的XMLHttpRequest請求,否則就報錯。
"預檢"請求用的請求方法是OPTIONS,表示這個請求是用來詢問的。頭信息裏面,關鍵字段是Origin,表示請求來自哪個源。

解決問題方法

在服務端加上origin ,
app.all(’*’, function(req, res, next) {
var origin = req.headers.origin;
res.header(‘Access-Control-Allow-Origin’, origin);

res.header(‘Access-Control-Allow-Methods’, ‘PUT, GET, POST, DELETE, OPTIONS,PATCH,TRACE’)
res.header(‘Access-Control-Allow-Headers’, ‘mytoken’);
res.header(“Access-Control-Allow-Headers”, “Origin, X-Requested-With, Content-Type, Accept”);
res.header(“Access-Control-Allow-Credentials”, true)
next();
});
參考:http://www.ruanyifeng.com/blog/2016/04/cors.html

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章