CORSについて
CORS・・・Cross-Origin Resource Sharing
異なるオリジン間でデータや画像、およびスクリプトファイルなどを共有する仕組みです。
例）
登場するサーバー
A.呼び出し元：origin.example.com
B.呼び出したいAPI：api.example.com
上記において、AからBに対してとあるapiをcallしたいときどうすればいいか？
答え：B側（api.exmple.com）のapiに、CORSの設定を行う。
例えば、下記はcloudflare workersでCORSの設定をしたもの。
すべてのアクセス元のGET, HEAD, POST, OPTIONSを許可する。
code:index.ts
export default {
async fetch(request: Request, env: Env, ctx: ExecutionContext): Promise<Response> {
const jsonResponse = JSON.stringify({ message: "Hello World" });
// Responseオブジェクトを作成し、Content-Typeヘッダーにapplication/jsonを設定
let response = new Response(jsonResponse, {
headers: {
"Content-Type": "application/json",
// CORS関連のヘッダーを設定
"Access-Control-Allow-Origin": "*", // すべてのオリジンからのアクセスを許可
"Access-Control-Allow-Methods": "GET,HEAD,POST,OPTIONS", // 許可するHTTPメソッド
"Access-Control-Allow-Headers": "Content-Type" // 許可するHTTPヘッダー
}
});
// オプションリクエスト（プリフライトリクエスト）への対応
if (request.method === "OPTIONS") {
response = new Response(null, {
headers: {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "GET,HEAD,POST,OPTIONS",
"Access-Control-Allow-Headers": "Content-Type"
}
});
}
return response;
},
};