tencent cloud

Tencent Cloud EdgeOne

レスポンスヘッダーの変更

ダウンロード
フォーカスモード
フォントサイズ
最終更新日: 2026-10-15 18:25:50
AI翻訳
この例では、Fetch APIを使用して、サイトドメインwww.example.comへのリバースプロキシを実現し、エッジ関数でHTTPレスポンスヘッダーを設定することで、クロスオリジンリソースシェアリングCORS(Cross-Origin Resource Sharing)を実現します。

サンプルコード

async function handleRequest(event) {
const { request } = event;
const urlInfo = new URL(request.url);
const proxyRequest = new Request(`https://www.example.com${urlInfo.pathname}${urlInfo.search}`, {
method: request.method,
body: request.body,
headers: request.headers,
copyHeaders: true,
});
proxyRequest.headers.set('Host', 'www.example.com');
fetchリバースプロキシ
const response = await fetch(proxyRequest);

カスタムレスポンスヘッダーを追加します。
リソースへのアクセスを許可するオリジンを指定します。
response.headers.append('Access-Control-Allow-Origin', '*');
リソースへのアクセスを許可するHTTPメソッド(GET、POSTなど)を指定します。
response.headers.append('Access-Control-Allow-Methods', 'GET,POST');
正式リクエストヘッダーに含めることができるHTTPヘッダーを指定します。
response.headers.append('Access-Control-Allow-Headers', 'Authorization');
}
response.headers.append('Access-Control-Max-Age', '86400');
レスポンスヘッダーを削除します。
response.headers.delete('X-Cache');
return response;
}

addEventListener('fetch', event => {
event.respondWith(handleRequest(event));
});

サンプルプレビュー

ブラウザのアドレスバーにエッジ関数のトリガールールに一致するURLを入力すると、サンプル効果をプレビューできます。


関連参考

ヘルプとサポート

この記事はお役に立ちましたか?

フィードバック