Amazon API GatewayとAWS LambdaでフロントエンドからCookieを送受信する
2025.09.03リテールアプリ共創部のるおんです。
Amazon API GatewayとLambdaをバックエンドリソースとして使用するアプリケーションを開発している際に、httpOnlyな属性が付いたCookieをフロントエンドからの送信してLambdaで受け取りたい場面があったので、構成と実装手順をまとめました。
先に結論
- LambdaとAPI Gatewayからのレスポンスヘッダーに
Access-Control-Allow-Credentials: trueが含まれるようにする - フロントエンド側ではfetchリクエスト時に
credentials: 'include'を指定し認証情報を含め送信するようにする
設定
① API Gatewayの設定
API Gateway（REST API）では、Access-Control-Allow-Credentialsを統合レスポンスでマッピングし、メソッドレスポンスからも返却するように設定する必要があります。
「CORSを有効化」にするから「その他の設定」内の「Access-Control-Allow-Credentials」にチェックを入れることで両方有効化することが可能です。
設定完了後、OPTIONSメソッドの統合レスポンスとメソッドレスポンスのヘッダーに追加されていることが確認できます。
これにより、API GatewayからフロントエンドにAccess-Control-Allow-Credentialsヘッダーを返却できるようになります。
統合レスポンス
メソッドレスポンス
[ちなみに] AWS CDKだと
AWS CDKを使用する場合、defaultCorsPreflightOptionsにallowCredentials: trueを指定するだけで完了です。
// APIGatewayの定義
const api = new aws_apigateway.RestApi(this, "Default", {
...省略
defaultCorsPreflightOptions: {
allowOrigins:"your-domain.com",
allowMethods: aws_apigateway.Cors.ALL_METHODS,
allowHeaders: aws_apigateway.Cors.DEFAULT_HEADERS,
+ allowCredentials: true, // クッキーを含めるために必要
},
...省略
});
② Lambda実装
API Gatewayの設定に加え、Lambda関数のresponseのヘッダーにAccess-Control-Allow-Credentials: trueを含めて返却することで、Cookieを 受信 できるようになります
export const handler = async (event) => {
console.log("event", event);
const response = {
statusCode: 200,
headers: {
"Access-Control-Allow-Origin": "https://your-domain.com",
'Access-Control-Allow-Headers': 'Content-Type, Authorization',
+ 'Access-Control-Allow-Credentials': 'true', // 追加
},
body: JSON.stringify({
message: 'Hello from Lambda!',
}),
};
return response;
};
expressの場合はこんな感じ
フレームワークにexpressを使用している場合は以下のように設定可能です。
これらは使用するフレームワークに応じて適宜実装をしてください
app.use(
cors({
origin: "your-domain.com",
optionsSuccessStatus: 200,
+ credentials: true, // クッキーを含めるために必要
}),
);
LambdaでCookieをレスポンスとして 送信 する場合はレスポンスヘッダーに以下のように"Set-Cookie"を追加することで送信することができます。
const response = {
statusCode: 200,
headers: {
"Access-Control-Allow-Origin": "https://your-domain.com",
'Access-Control-Allow-Headers': 'Content-Type, Authorization',
+ 'Access-Control-Allow-Credentials': 'true',
+ 'Set-Cookie': 'debugSessionId=debug123456; Path=/; Max-Age=3600; SameSite=None; Secure' // 追加
},
body: JSON.stringify({
message: 'Hello from Lambda!',
}),
};
③ フロントエンド実装（Cookieを含めて送信）
fetchメソッドのオプションでcredentials: 'include'を付与すると、Cookieがリクエストに含まれます。
const handleClick = async () => {
const response = await fetch("https://api.your-domain.com/endpoint", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({}),
+ credentials: "include", // クッキーを含む
});
const data = await response.json();
console.log(data);
};
Axiosを使う場合の例:
axios.post("https://api.your-domain.com/endpoint", {}, { withCredentials: true });
こちらも使用するライブラリに応じて適宜実装してください。
動作確認
- Reactで作成したフロントエンドアプリケーションからCookie付きのfetchリクエストを実行。
- CloudWatch Logsで出力したCookieのログを確認
1. Reactで作成したフロントエンドアプリケーションからCookie付きのfetchリクエストを実行
debugSessionIdというkeyのCookieを適当に設定しておいて、フロントエンドからリクエストを送信します。
実際にPOSTリクエストを送信すると、レスポンスヘッダーにaccess-control-allow-credentials trueが追加されていることが確認できます。
これによってCookieを受信するための準備が正しく設定されていることがわかります。
また、リクエストヘッダーには該当のCookieが含まれていることが確認できます。
無事にdebugSessionIdの値を送信できていそうですね。
2. CloudWatch Logsで出力したサーバー側のCookieのログを確認
先ほどの1で送信したCookieの値が適切にサーバー側で取得できているのかのログをCloudWatch Logsで確認してみます。Lambda関数の中にeventの中身を出力するconsole.logを仕込んであったので、そちらを確認します。
2025-09-02T09:21:57.910Z 1d6ed003-d244-40af-97ee-c2361ff9d455 INFO event {
resource: '/CookieTest',
path: '/CookieTest',
httpMethod: 'POST',
headers: {
accept: '*/*',
'accept-encoding': 'gzip, deflate, br, zstd',
'accept-language': 'ja,en-US;q=0.9,en;q=0.8',
'content-type': 'application/json',
+ cookie: 'debugSessionId=debug123456',
Host: 'xxxxxxx.execute-api.ap-northeast-1.amazonaws.com',
origin: 'https://your-domain.com',
priority: 'u=1, i',
referer: 'https://your-domain.com/',
'sec-ch-ua': '"Not;A=Brand";v="99", "Google Chrome";v="139", "Chromium";v="139"',
'sec-ch-ua-mobile': '?1',
...省略
cookie: 'debugSessionId=debug123456'が渡ってきているのが確認できますね。
おわりに
LambdaとAPI Gatewayから返却されるヘッダーを正しく設定し、credentialsを伴うリクエストを許可すれば、フロントエンドからCookieを含むリクエストをLambdaで安全に受け取れます。これにより普通のCookieだけじゃなく、httpOnlyなCookieもサーバーに送受信することができます。
以上、どなたかの参考になれば幸いです。
参考
