RustでのCORS設定をわかりやすく解説｜初心者向けガイド

Rustは、高速で安全性の高いシステムプログラミング言語として注目されています。その中で、クロスオリジンリソース共有（CORS）は、APIやウェブアプリケーションを開発する際に避けて通れない重要な概念です。CORSを正しく設定することで、セキュリティを維持しつつ、異なるオリジン間でのリソース共有を可能にできます。しかし、初めてRustを使う開発者にとって、CORSの設定は難解に感じるかもしれません。本記事では、RustでのCORS設定をわかりやすく解説し、実際のプロジェクトにすぐ活用できる方法をお伝えします。

CORSの基本概要

クロスオリジンリソース共有（CORS: Cross-Origin Resource Sharing）は、ウェブブラウザが異なるオリジン間でのリソース共有を許可するための仕組みです。デフォルトでは、ウェブブラウザはセキュリティ上の理由から、スクリプトが異なるオリジン（ドメイン、プロトコル、ポート）に対してリソースを要求することを禁止しています。この制限を緩和するためにCORSが利用されます。

オリジンとは何か

オリジンは、URLのスキーム（http/https）、ホスト名（ドメイン）、ポート番号の組み合わせで定義されます。例えば、http://example.comとhttps://example.comは異なるオリジンと見なされます。

CORSの仕組み

CORSは、サーバーが特定のオリジンに対してリソースへのアクセスを許可するHTTPヘッダーを返すことで機能します。これにより、ブラウザはリクエストが許可されていることを確認し、リソースを共有します。代表的なCORSヘッダーには以下があります。

Access-Control-Allow-Origin: 許可するオリジンを指定
Access-Control-Allow-Methods: 許可するHTTPメソッドを指定
Access-Control-Allow-Headers: 許可するカスタムヘッダーを指定

なぜCORSが重要か

CORSは、次のような理由で重要です。

セキュリティの確保: 不正なクロスサイトスクリプティング（XSS）攻撃を防ぎます。
柔軟なリソース共有: 正当なオリジンからのリクエストを受け入れることで、ウェブアプリケーションの利便性を向上させます。
標準的な手法: モダンなウェブアプリケーションにおけるAPI設計で広く採用されています。

RustでCORSを設定する際には、この基本的な仕組みを理解しておくことが重要です。次のセクションでは、Rust環境でCORSを設定するための準備について解説します。

RustでのCORS設定の準備

RustでCORSを設定するには、いくつかの準備が必要です。ここでは、必要なツールやライブラリのインストールから環境のセットアップまでを解説します。

1. Rust環境のセットアップ

Rustを使用するためには、まずRustのインストールを確認する必要があります。以下のコマンドでRustをインストールまたは更新してください。

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

すでにインストール済みの場合は、以下のコマンドで最新バージョンに更新できます。

rustup update

2. 必要なライブラリのインストール

CORSの設定には、使用するウェブフレームワークに応じたライブラリが必要です。以下は一般的なフレームワークで必要なライブラリです。

Actix-webの場合
actix-corsライブラリを使用します。以下のコマンドで依存関係に追加してください。

  cargo add actix-cors

Rocketの場合
Rocketは組み込みでCORSをサポートしていないため、カスタム実装や外部ライブラリが必要になります。
Hyperの場合
HyperのCORS設定には、ミドルウェアをカスタムで実装する必要があります。

3. Cargoプロジェクトの作成

新しいRustプロジェクトを作成する場合、以下のコマンドを使用します。

cargo new my_cors_project
cd my_cors_project

4. Cargo.tomlの編集

プロジェクトのCargo.tomlファイルを編集して、必要な依存関係を追加します。例えば、Actix-webとActix-corsを使用する場合は以下のように記述します。

[dependencies]
actix-web = "4.0"
actix-cors = "0.6"

5. 簡単なサーバーコードの作成

CORS設定を行う前に、基本的なウェブサーバーを構築します。以下はActix-webを使用したシンプルなサーバーの例です。

use actix_web::{web, App, HttpServer, Responder};

async fn index() -> impl Responder {
    "Hello, Rust!"
}

#[actix_web::main]
async fn main() -> std::io::Result<()> {
    HttpServer::new(|| App::new().route("/", web::get().to(index)))
        .bind("127.0.0.1:8080")?
        .run()
        .await
}

このコードを基に、次のセクションでCORSの設定を加えていきます。準備が整ったら、いよいよCORSの具体的な設定に進みましょう。

Hyperを使用したCORSの設定

Hyperは軽量かつ柔軟なウェブサーバーフレームワークで、RustでのCORS設定をカスタマイズできます。このセクションでは、Hyperを用いたCORS設定の手順を解説します。

1. 必要な依存関係の追加

Hyperを使用するプロジェクトでは、以下の依存関係をCargo.tomlに追加してください。

[dependencies]
hyper = "0.14"
tokio = { version = "1", features = ["full"] }

HyperではCORS対応のためにミドルウェアを自作することが一般的です。

2. サーバーコードの基本構造

Hyperを使ったシンプルなウェブサーバーの例です。

use hyper::{Body, Request, Response, Server};
use hyper::service::{make_service_fn, service_fn};

async fn handle_request(_req: Request<Body>) -> Result<Response<Body>, hyper::Error> {
    Ok(Response::new(Body::from("Hello, Rust!")))
}

#[tokio::main]
async fn main() -> Result<(), Box<dyn std::error::Error + Send + Sync>> {
    let make_svc = make_service_fn(|_conn| {
        async { Ok::<_, hyper::Error>(service_fn(handle_request)) }
    });

    let addr = ([127, 0, 0, 1], 8080).into();
    let server = Server::bind(&addr).serve(make_svc);

    println!("Server running on http://{}", addr);
    server.await?;

    Ok(())
}

このコードはリクエストを受け取り、レスポンスを返す基本的なHyperサーバーです。

3. CORSミドルウェアの実装

HyperではCORSをサポートするミドルウェアを自作します。以下は、CORS対応ヘッダーを追加する例です。

use hyper::{Body, Request, Response};
use hyper::header::{HeaderValue, ACCESS_CONTROL_ALLOW_ORIGIN, ACCESS_CONTROL_ALLOW_METHODS};

async fn cors_middleware(req: Request<Body>) -> Result<Response<Body>, hyper::Error> {
    let mut response = match req.method() {
        &hyper::Method::OPTIONS => Response::builder()
            .header(ACCESS_CONTROL_ALLOW_ORIGIN, "*")
            .header(ACCESS_CONTROL_ALLOW_METHODS, "GET, POST, OPTIONS")
            .body(Body::empty())?,
        _ => Response::builder()
            .header(ACCESS_CONTROL_ALLOW_ORIGIN, "*")
            .body(Body::from("Hello, Rust!"))?,
    };

    Ok(response)
}

このコードでは、すべてのオリジン（*）に対してリソースへのアクセスを許可しています。また、OPTIONSリクエストに対応するプリフライトリクエストを処理しています。

4. ミドルウェアをサーバーに組み込む

ミドルウェアをサーバーに統合することで、CORS対応のリクエスト処理が可能になります。

#[tokio::main]
async fn main() -> Result<(), Box<dyn std::error::Error + Send + Sync>> {
    let make_svc = make_service_fn(|_conn| {
        async { Ok::<_, hyper::Error>(service_fn(cors_middleware)) }
    });

    let addr = ([127, 0, 0, 1], 8080).into();
    let server = Server::bind(&addr).serve(make_svc);

    println!("Server running on http://{}", addr);
    server.await?;

    Ok(())
}

5. 動作確認

サーバーを起動し、CORS対応のリクエストが正常に処理されることを確認します。ブラウザの開発者ツールを使用して、レスポンスヘッダーにAccess-Control-Allow-Originが含まれていることを確認してください。

Hyperでは、CORS対応のミドルウェアを自作する柔軟性があります。この仕組みを活用して、プロジェクトの要件に応じたCORS設定を行いましょう。次のセクションでは、Actix-webを使用したCORS設定について説明します。

Actix-webを用いたCORSの設定

Actix-webは、高性能で機能豊富なRustのウェブフレームワークです。このセクションでは、Actix-webを使用してCORSを設定する方法を詳しく解説します。

1. 必要な依存関係の追加

Actix-webでCORSを設定するには、以下の依存関係をCargo.tomlに追加してください。

[dependencies]
actix-web = "4.0"
actix-cors = "0.6"

これにより、CORSの設定を簡単に行うためのactix-corsライブラリが利用可能になります。

2. 基本的なActix-webサーバーの構築

以下は、Actix-webを使ったシンプルなウェブサーバーの例です。

use actix_web::{web, App, HttpServer, Responder};

async fn index() -> impl Responder {
    "Hello, Rust!"
}

#[actix_web::main]
async fn main() -> std::io::Result<()> {
    HttpServer::new(|| App::new().route("/", web::get().to(index)))
        .bind("127.0.0.1:8080")?
        .run()
        .await
}

このサーバーは基本的なGETリクエストを処理します。次に、このサーバーにCORS設定を追加します。

3. CORSの設定

Actix-corsライブラリを使用すると、簡単にCORSを設定できます。以下は、CORS設定を追加した例です。

use actix_cors::Cors;
use actix_web::{web, App, HttpServer, Responder};

async fn index() -> impl Responder {
    "Hello, Rust!"
}

#[actix_web::main]
async fn main() -> std::io::Result<()> {
    HttpServer::new(|| {
        App::new()
            .wrap(
                Cors::default()
                    .allow_any_origin() // 任意のオリジンを許可
                    .allowed_methods(vec!["GET", "POST"]) // 許可するHTTPメソッドを指定
                    .allowed_headers(vec!["Content-Type"]) // 許可するヘッダーを指定
                    .max_age(3600), // プリフライトリクエストのキャッシュ時間を設定
            )
            .route("/", web::get().to(index))
    })
    .bind("127.0.0.1:8080")?
    .run()
    .await
}

4. 各CORS設定オプションの説明

allow_any_origin: すべてのオリジンを許可します。特定のオリジンのみを許可する場合は、.allowed_origin("http://example.com")を使用してください。
allowed_methods: 許可するHTTPメソッドを指定します。配列で複数指定可能です。
allowed_headers: 許可するカスタムヘッダーを指定します。
max_age: プリフライトリクエストのキャッシュ期間を秒単位で指定します。

5. 動作確認

サーバーを起動して、クライアントアプリケーションからリクエストを送信します。ブラウザの開発者ツールを開き、レスポンスヘッダーに以下のCORSヘッダーが含まれていることを確認してください。

Access-Control-Allow-Origin
Access-Control-Allow-Methods
Access-Control-Allow-Headers

6. 応用例

CORS設定は、APIを公開する際に特に有用です。例えば、フロントエンドがReactやVue.jsで構築された場合、同じドメインで動作しないバックエンドAPIにCORS設定を追加することで、シームレスな通信を実現できます。

Actix-webのCORS機能を活用することで、簡単かつ安全に異なるオリジン間でのリソース共有が可能になります。次のセクションでは、CORSエラーのデバッグとトラブルシューティングについて解説します。

デバッグとトラブルシューティング

CORSエラーは、ウェブ開発者が頻繁に直面する問題です。RustでCORSを設定する際にも、設定ミスや特定の条件でエラーが発生することがあります。このセクションでは、CORSエラーの一般的な原因と解決方法を解説します。

1. 一般的なCORSエラーの例

ブラウザで以下のようなエラーが表示されることがあります。

「Access to fetch at ‘…’ from origin ‘…’ has been blocked by CORS policy.」
このエラーは、サーバーが適切なCORSヘッダーを返していないことを意味します。
「Preflight request doesn’t pass access control check.」
プリフライトリクエストが失敗している場合に表示されます。OPTIONSリクエストが正しく処理されていない可能性があります。

2. エラーの原因と解決方法

2.1. 許可されていないオリジン

原因: サーバーのCORS設定でリクエスト元のオリジンが許可されていない。
解決方法:
CORS設定でリクエスト元のオリジンを明示的に許可するか、すべてのオリジンを許可する設定を追加します。

Cors::default().allowed_origin("http://example.com")

2.2. プリフライトリクエストの不備

原因: サーバーがOPTIONSリクエストを正しく処理していない。
解決方法:
OPTIONSリクエストに適切なヘッダーを返すように設定します。Actix-webでは以下のコードで対応できます。

Cors::default()
    .allowed_methods(vec!["GET", "POST", "OPTIONS"])

2.3. 必要なヘッダーが欠落している

原因: クライアントが必要とするカスタムヘッダーがCORS設定で許可されていない。
解決方法:
リクエストに必要なヘッダーをallowed_headersで明示的に指定します。

Cors::default()
    .allowed_headers(vec!["Content-Type", "Authorization"])

2.4. HTTPSとHTTPの混在

原因: クライアントとサーバー間でHTTPとHTTPSが混在している。
解決方法:
すべてのリクエストとレスポンスをHTTPSに統一するか、両方のスキームに対応するCORS設定を行います。

3. デバッグの手順

ブラウザの開発者ツールを確認
ネットワークタブを開き、リクエストとレスポンスヘッダーを確認します。CORS関連のヘッダーが欠落していないかをチェックします。
サーバーのログを確認
サーバー側でリクエストを受信しているか、エラーが発生していないかを確認します。
テストツールを使用
curlやPostmanなどのツールを使ってサーバーへのリクエストを直接送信し、サーバーのレスポンスを確認します。

curl -X OPTIONS http://127.0.0.1:8080 -i

4. ベストプラクティス

必要最小限の許可設定: セキュリティを確保するため、許可するオリジンやヘッダーは最小限に抑えましょう。
プリフライトリクエストを確認: 特にカスタムヘッダーや非標準メソッドを使用する場合、プリフライトリクエストが正しく処理されることを確認してください。
ログとモニタリングの実施: エラーの発生頻度や詳細を追跡するために、適切なロギングとモニタリングを実装しましょう。

これらの手法を使えば、CORSエラーを効果的に特定し、解決することができます。次のセクションでは、セキュリティを考慮したCORS設定について解説します。

セキュリティを考慮したCORS設定

CORSの設定を誤ると、セキュリティ上の脆弱性を招く可能性があります。このセクションでは、セキュリティを考慮したCORS設定のベストプラクティスを解説します。

1. 特定のオリジンのみを許可

すべてのオリジンを許可する設定（allow_any_origin）は避けるべきです。攻撃者による不正なクロスオリジンリクエストを防ぐため、特定のオリジンのみを許可しましょう。

Cors::default()
    .allowed_origin("https://example.com")
    .allowed_origin("https://api.example.com")

これにより、許可したオリジン以外からのリクエストが拒否されます。

2. HTTPSを使用

CORS設定にかかわらず、すべての通信をHTTPSで暗号化することで、データの盗聴や改ざんを防ぎます。サーバーのSSL/TLS証明書を正しく設定し、HTTPリクエストをHTTPSにリダイレクトするよう構成しましょう。

3. クッキーのセキュア属性

クロスオリジンリクエストでクッキーを使用する場合は、以下のようにSecure属性とSameSite属性を設定することを推奨します。

Secure属性を有効にすることで、クッキーがHTTPS接続でのみ送信されます。
SameSite属性をStrictまたはLaxに設定することで、不正なクロスサイトリクエストを防ぎます。

Cors::default()
    .supports_credentials() // クッキーの送信を許可
    .allowed_origin("https://example.com")

4. プリフライトリクエストの制限

CORS設定の中でOPTIONSメソッドを許可する際は、必要最小限のアクセスを許可するようにします。プリフライトリクエストの応答に過剰な情報を含めないことで、セキュリティを向上させます。

Cors::default()
    .allowed_methods(vec!["GET", "POST"])
    .max_age(600) // プリフライトリクエストのキャッシュ期間を短く設定

5. ベストプラクティスのチェックリスト

明示的なオリジン許可: 特定の信頼できるオリジンのみを許可する。
HTTPSの使用: クライアントとサーバー間の通信を暗号化する。
最小限のメソッドとヘッダーの許可: 必要なものだけを明示的に許可する。
過剰な情報公開の防止: プリフライトリクエストやエラーレスポンスでの過剰な情報公開を避ける。
定期的なレビュー: アプリケーションの要件変更に応じてCORS設定を見直す。

6. セキュリティ脅威の回避

クロスサイトスクリプティング（XSS）: ユーザーからの入力データを検証し、スクリプトの注入を防ぎます。
クロスサイトリクエストフォージェリ（CSRF）: CORS設定と組み合わせて、CSRFトークンを活用しましょう。

セキュリティを意識したCORS設定は、アプリケーションの信頼性と安全性を大きく向上させます。次のセクションでは、実際のAPIにおけるCORS設定の応用例を紹介します。

応用例：APIにおけるCORSの活用

CORS設定は、モダンなウェブアプリケーションやAPIを設計する際に不可欠です。このセクションでは、具体的なAPIを例に、CORSの活用方法を解説します。

1. 応用例：ユーザー認証API

ユーザー認証を行うAPIでは、クライアント（フロントエンド）がサーバーに認証情報を送信し、セッション管理を行います。この場合、CORS設定が適切でないと、クッキーや認証ヘッダーが正しく処理されません。

以下は、認証APIのCORS設定例です。

Cors::default()
    .allowed_origin("https://frontend.example.com") // 信頼できるオリジンを指定
    .allowed_methods(vec!["POST", "OPTIONS"]) // 認証はPOSTメソッドのみ許可
    .allowed_headers(vec!["Content-Type", "Authorization"]) // 必要なヘッダーを許可
    .supports_credentials() // クッキーや認証トークンを送信可能にする

2. 応用例：データ取得API

別のオリジンで動作するフロントエンドアプリケーションが、バックエンドAPIからデータを取得するケースを考えます。たとえば、Reactアプリがhttps://api.example.comから製品リストを取得する場合です。

以下は、このケースに対応するCORS設定例です。

Cors::default()
    .allowed_origin("https://frontend.example.com") // Reactアプリのオリジンを指定
    .allowed_methods(vec!["GET", "OPTIONS"]) // データ取得はGETリクエストのみ許可
    .allowed_headers(vec!["Content-Type", "Authorization"])
    .max_age(3600) // プリフライトリクエストのキャッシュ時間を設定

3. 応用例：公開API

公開APIでは、CORS設定を柔軟にすることが求められます。ただし、セキュリティ上のリスクを最小限に抑えるために慎重に設定を行います。

以下は、公開APIでのCORS設定例です。

Cors::default()
    .allow_any_origin() // すべてのオリジンを許可
    .allowed_methods(vec!["GET", "OPTIONS"]) // 安全なリクエストメソッドのみ許可
    .allowed_headers(vec!["Content-Type"])
    .max_age(86400) // 長期間のプリフライトキャッシュ

公開APIでは、オリジンやメソッドを限定することで、不正利用のリスクを軽減します。

4. CORS設定の効果

ユーザー認証APIでは、認証トークンやクッキーを安全に処理できるようになります。
データ取得APIでは、フロントエンドアプリケーションが安全にデータを取得できます。
公開APIでは、多様なクライアントからのアクセスを許容しつつ、最低限のセキュリティを確保できます。

5. 実例：製品検索API

以下は、製品検索APIにおけるCORS設定の具体例です。

use actix_cors::Cors;
use actix_web::{web, App, HttpServer, Responder};

async fn search_products() -> impl Responder {
    "Product list"
}

#[actix_web::main]
async fn main() -> std::io::Result<()> {
    HttpServer::new(|| {
        App::new()
            .wrap(
                Cors::default()
                    .allowed_origin("https://frontend.example.com")
                    .allowed_methods(vec!["GET"])
                    .allowed_headers(vec!["Content-Type"])
                    .max_age(3600),
            )
            .route("/products", web::get().to(search_products))
    })
    .bind("127.0.0.1:8080")?
    .run()
    .await
}

この設定では、特定のフロントエンドアプリケーションが/productsエンドポイントに安全にアクセスできます。

CORS設定を適切に利用することで、セキュアで柔軟なAPIを構築できます。次のセクションでは、CORS設定を実際に試すための演習を紹介します。

演習：簡単なCORS設定を試してみよう

このセクションでは、CORS設定を実際に試すための演習を行います。サンプルコードを基に、RustでCORS対応のサーバーを構築し、リクエストを送信して動作を確認しましょう。

1. サーバーの作成

以下のコードを使用して、簡単なCORS対応サーバーを作成します。このサーバーは、/helloエンドポイントにGETリクエストを処理し、CORSヘッダーを含むレスポンスを返します。

use actix_cors::Cors;
use actix_web::{web, App, HttpServer, Responder};

async fn hello() -> impl Responder {
    "Hello, CORS!"
}

#[actix_web::main]
async fn main() -> std::io::Result<()> {
    HttpServer::new(|| {
        App::new()
            .wrap(
                Cors::default()
                    .allow_any_origin() // すべてのオリジンを許可
                    .allowed_methods(vec!["GET"]) // GETリクエストを許可
                    .allowed_headers(vec!["Content-Type"]) // Content-Typeヘッダーを許可
                    .max_age(3600), // プリフライトリクエストのキャッシュ時間
            )
            .route("/hello", web::get().to(hello))
    })
    .bind("127.0.0.1:8080")?
    .run()
    .await
}

2. サーバーの起動

コードを実行してサーバーを起動します。

cargo run

サーバーが127.0.0.1:8080でリッスンを開始します。

3. リクエストの送信

ブラウザの開発者ツールやcurlコマンドを使用してリクエストを送信します。以下のコマンドを使用して動作を確認してください。

curl -i -X GET http://127.0.0.1:8080/hello

レスポンスヘッダーに以下のCORSヘッダーが含まれていることを確認します。

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET

4. フロントエンドからのリクエスト

簡単なHTML/JavaScriptファイルを作成し、CORS対応サーバーにリクエストを送信します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CORS Test</title>
    <script>
        async function fetchHello() {
            const response = await fetch('http://127.0.0.1:8080/hello');
            const text = await response.text();
            document.getElementById('result').innerText = text;
        }
    </script>
</head>
<body>
    <button onclick="fetchHello()">Send Request</button>
    <p id="result"></p>
</body>
</html>

このHTMLをブラウザで開き、「Send Request」ボタンをクリックします。サーバーからのレスポンスが画面に表示されれば成功です。

5. チャレンジ問題

以下の問題に取り組んで、CORS設定の理解を深めましょう。

特定のオリジン（例：http://example.com）のみを許可するようにコードを修正してください。
POSTリクエストを許可するようにCORS設定を変更し、クライアントからデータを送信するサンプルを作成してください。
セキュリティを考慮して、プリフライトリクエストのキャッシュ時間を短く設定してみましょう。

これらの演習を通じて、RustでのCORS設定の基礎を実践的に学び、プロジェクトで活用できるスキルを身につけましょう。次のセクションでは、これまでの内容を振り返り、まとめを行います。

まとめ

本記事では、RustでのCORS設定について基礎から実践まで詳しく解説しました。CORSの基本概念や仕組みから、HyperやActix-webを用いた具体的な設定方法、セキュリティを考慮した実装のベストプラクティス、さらには応用例や演習までをカバーしました。

CORS設定は、APIやウェブアプリケーションを安全かつ柔軟に運用するための重要なスキルです。適切なCORS設定を行うことで、異なるオリジン間でのリソース共有を安全に実現し、ユーザー体験の向上に貢献できます。

ぜひ、本記事で紹介した内容を活用して、RustプロジェクトにおけるCORS設定をスムーズに行い、信頼性の高いアプリケーションを構築してください。

RustでのCORS設定をわかりやすく解説｜初心者向けガイド

CORSの基本概要

オリジンとは何か

CORSの仕組み

なぜCORSが重要か

RustでのCORS設定の準備

1. Rust環境のセットアップ

2. 必要なライブラリのインストール

3. Cargoプロジェクトの作成

4. Cargo.tomlの編集

5. 簡単なサーバーコードの作成

Hyperを使用したCORSの設定

1. 必要な依存関係の追加

2. サーバーコードの基本構造

3. CORSミドルウェアの実装

4. ミドルウェアをサーバーに組み込む

5. 動作確認

Actix-webを用いたCORSの設定

1. 必要な依存関係の追加

2. 基本的なActix-webサーバーの構築

3. CORSの設定

4. 各CORS設定オプションの説明

5. 動作確認

6. 応用例

デバッグとトラブルシューティング

1. 一般的なCORSエラーの例

2. エラーの原因と解決方法

2.1. 許可されていないオリジン

2.2. プリフライトリクエストの不備

2.3. 必要なヘッダーが欠落している

2.4. HTTPSとHTTPの混在

3. デバッグの手順

4. ベストプラクティス

セキュリティを考慮したCORS設定

1. 特定のオリジンのみを許可

2. HTTPSを使用

3. クッキーのセキュア属性

4. プリフライトリクエストの制限

5. ベストプラクティスのチェックリスト

6. セキュリティ脅威の回避

応用例：APIにおけるCORSの活用

1. 応用例：ユーザー認証API

2. 応用例：データ取得API

3. 応用例：公開API

4. CORS設定の効果

5. 実例：製品検索API

演習：簡単なCORS設定を試してみよう

1. サーバーの作成

2. サーバーの起動

3. リクエストの送信

4. フロントエンドからのリクエスト

5. チャレンジ問題

まとめ

コメント

コメントする コメントをキャンセル

コメントするコメントをキャンセル