fetch（）はサーバーから受信したCookieを設定できません。

Question

私はExpress.jsサーバーを使用しています。私は手動で私は、ブラウザのデバッグコンソールを実行しているウェブサイトは、クッキーが適用されていることを示していhttp://localhost:5555/sにブラウザを使用する場合cookie-parserで、私は、このエンドポイントに

app.get("/s", (req,res) => { 
    res.cookie("bsaSession", req.session.id) 
    res.send("set cookie ok") 
}) 

を開きました。

しかし、私は同等のものを行うにはfetch APIを使用する場合、それはクッキーを設定しません。

async trySetCookie() 
    { 
    await fetch("http://localhost:5555/s",{ 
     method: 'GET', 
     credentials: 'same-origin' 
    }) 
    } 

なぜですか？

Answer 1

解決策が見つかりました。この問題の核心は、fetchをトリガーするボタンがhttp://localhost:3000/にあることです。サーバーは

問題はこのfetchコール

async trySetCookie() 
    { 
    await fetch("http://localhost:5555/s",{ 
     method: 'GET', 
     credentials: 'same-origin' 
    }) 
    } 

credentialsがなければ、ブラウザが送信またはfetch（https://developer.mozilla.org/en-US/docs/Web/API/Request/credentials）

経由でクッキーを受け取ることができないということです（私は自分のマシン上で実環境をシミュレートしています） http://localhost:5555/であります

credentialsとしてsame-origin応答ヘッダーのSet-Cookieにサーバーから送信されたCookieが表示されますが、ブラウザには何も格納されていません。 1つの奇妙なことは、サーバー上の{httpOnly : true/false}の設定にかかわらず、この応答に常にHttpOnlyがCookie文字列の後にタグ付けされていることです。 GETリクエストを行うためにページにブラウザを手動で使用する場合、いつものようにHttpOnlyが尊重され、Cookieが設定されます。

したがって、解決策は、クロスオリジンクッキー送信を可能にするために、credentialsをincludeと設定することです。

app.get("/s", (req,res) => { 
    res.cookie("bsaSession", req.session.id, {httpOnly:false}) 
    res.header('Access-Control-Allow-Origin', 'http://localhost:3000') 
    res.header('Access-Control-Allow-Credentials','true' 
    res.send("set") 
}) 

が

XMLHttpRequest cannot load http://localhost:5555/s. Cannot use wildcard in Access-Control-Allow-Origin when credentials flag is true.

しかし、クッキーの意志になり、これをやっていない：あなたは新しいヘッダを使って手動で特定の起源を許可する必要があり、サーバー側でも

async trySetCookie() 
    { 
    await fetch("http://localhost:5555/s",{ 
     method: 'GET', 
     credentials: 'include' 
    }) 
    } 

、このエラーに関係なく設定してください。そのヘッダーをインクルードしてエラーを無音にしてもいいです。

Expressのcorsミドルウェアを使用している場合は、さらに簡単です。あなただけの

var corsOptions = { 
    origin: 'http://localhost:3000', 
    credentials: true 
} 

app.use(cors(corsOptions)) 

そしてもちろんcredentials: 'include'のこれらのオプションを使用することができ、まだクライアント側で必要とされます。