React 解決fetch跨域請求時session失效

RaoMeng發表於2018-12-06
React跨域Session

在解決fetch跨域請求介面的時候，一般都是讓後臺介面在返回頭裡新增

//允許所有域名的指令碼訪問該資源
header("Access-Control-Allow-Origin: *");
複製程式碼

image.png

確實這樣是可以解決跨域請求的問題，但是如果我們要在請求的時候新增session，那麼這樣設定就會出現問題了。 fetch新增Cookie驗證的方法是設定credentials: 'include'

fetch(url, {
        method: 'POST',
        body: JSON.stringify(params),
        mode: 'cors',
        //請求時新增Cookie
        credentials: 'include',
        headers: new Headers({
            'Accept': 'application/json',
            "Content-Type": "application/x-www-form-urlencoded; charset=utf-8",
        })
    })
複製程式碼

設定好了之後，信心滿滿的發起請求。卻發現網路請求報錯了

A wildcard '*' cannot be used in the 'Access-Control-Allow-Origin' header when the credentials flag is true. Origin 'http://localhost:3000' is therefore not allowed access
複製程式碼

原因是網路請求需要攜帶Cookie時Access-Control-Allow-Origin是不能設定為*的，這個時候應該要給Access-Control-Allow-Origin指定域名

image.png

這樣就可以達到跨域請求的同時傳遞Cookie的目的了

相關文章