Cookie周り整理
shuntaka過去に書いた
shuntakalocalhost:3000(next)とlocalhost:3001(server)でもlocalhostの場合、port違いでもset-cookie出来る。(sameSite=Lax, httpOnly。domain属性なし)
shuntakacredentials: 'include' を設定していない場合、サーバーから Set-Cookie ヘッダーが送信されてもクライアントはそのクッキーを保存しない。
import { useEffect, useState } from 'react';
function Home() {
const [data, setData] = useState<any>(null);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
const fetchData = async () => {
try {
const response = await fetch('http://localhost:3001', {
method: 'GET',
credentials: 'include', // <- ないとクライアントが送る/送らないだけじゃなく、そもそもSetCookieすらされない
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
setData(data);
} catch (_error) {
setError('Failed to fetch data from localhost:3001');
}
};
fetchData();
}, []);
if (error) {
return <div>Error: {error}</div>;
}
return (
<div>
<h1>Data from localhost:3001</h1>
<pre>{JSON.stringify(data, null, 2)}</pre>
</div>
);
}
export default Home;
CORS（Cross-Origin Resource Sharing）ポリシーに違反していることを示しています。具体的には、リクエストが credentials モードで行われているため、Access-Control-Allow-Origin ヘッダーの値がワイルドカード (*) ではいけません。
Cookieを伴うリクエストは、Access-Control-Allow-Originを絞らないとダメみたい。流石にそうか。
shuntakashuntaka.site/:1 Access to fetch at 'https://api.shuntaka.site/auth/generate-authentication-options' from origin 'https://shuntaka.site' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'.
Access-Control-Allow-Credentials を trueにしないといけなかった
shuntakalocalhostでのSecure属性は無視されるんだなー。↑といいlocalhostは開発しやすいようになっているのね