クロスドメインとは何か、クロスドメインの問題を解決する方法

クロスドメインとは何ですか

Web分野の開発ではフロントエンドとバックエンドの分離モードがよく使われます。このモードでは、フロントエンドとバックエンドは独立した Web アプリケーションです。たとえば、バックエンドは Java プログラム、フロントエンドは React または Vue アプリケーションです。

独立した Web アプリが相互にアクセスする場合、クロスドメインの問題が必ず発生します。

クロスドメインの問題を解決するには通常 2 つの方法があり、もう 1 つは nginx を使用して解決する方法です。

1. CORS は
バックエンド サーバーに HTTP 応答ヘッダーを設定し、アクセスを許可するために必要なドメイン名を Access-Control-Allow-Origin に追加します。

2. jsonp は
バックエンドを使用してリクエストに従って json データを構築し、それを返します。フロントエンドは jsonp を使用してクロスドメインを実行します。

これら 2 つのアプローチについては、この文書では説明しません。

nginx は、最初のアイデアに基づいたクロスドメイン ソリューションも提供することに注意してください。

例: www.helloworld.com Web サイトは、フロントエンド アプリとバックエンド アプリで構成されています。フロントエンドのポート番号は 9000、バックエンドのポート番号は 8080 です。

フロントエンドとバックエンドが http を使用して対話する場合、クロスドメインの問題によりリクエストは拒否されます。nginx がそれをどのように解決するかを見てみましょう。

まず、enable-cors.conf ファイルで cors を設定します。

許可元リスト

$ACTION '*' を設定します。

単一原点を設定する

if ( $ふふふ\_{\_}_{}わかりました\_\ast (www.helloworld.com)\left)\right\{$ set $ACAO$\$$$http\_origin$$;$}

if ( KaTeX 解析エラー: 予期された '}'、入力の最後に 'EOF' が発生しました: …Allow-Origin' " http_origin";
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow -メソッド' 'GET、POST、OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT、X-Mx-ReqToken、Keep-Alive、User-Agent、X-Requested-With、If-Modified-Since、キャッシュ制御、コンテンツタイプ';
}

if ($request_method = 'OPTIONS') { set cors " cors "
$cors"$ {cors} オプション";
}

if ($request_method = 'GET') { set cors " cors "
$cors"$ {cors}get";
}

if ($request_method = 'POST') { set cors " cors "
$cors"$ {cors}post";
}
次に、サーバーにenable-cors.confを組み込み、クロスドメイン構成を導入します。

-------------------------------------------------- --

このファイルはプロジェクトの nginx 構成フラグメントです

nginx config に直接含めることができます (推奨)

または、既存の nginx にコピーして自分で設定します

www.helloworld.com ドメイン名は DNS ホストで構成する必要があります

その中で、API は cors を有効にしており、このディレクトリ内の別の構成ファイルと連携する必要があります。

-------------------------------------------------- --

上流のfront_server{ サーバーwww.helloworld.com:9000; }アップストリーム api_server{ サーバー www.helloworld.com:8080; }

サーバー { リッスン 80; サーバー名 www.helloworld.com;

location ~ ^/api/ { enable-cors.conf をインクルードします。proxy_pass http://api_server; “^/api/(.*)$” /$1 ブレークを書き換えます。}

location ~ ^/ { proxy_pass http://front_server; } }これで完了です。