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

在解決fetch跨域請求接口的時候,通常都是讓後臺接口在返回頭裏添加json

//容許全部域名的腳本訪問該資源
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.pngsession

這樣就能夠達到跨域請求的同時傳遞Cookie的目的了app

  • 列表項目
相關文章
相關標籤/搜索