Nginx 構成 クロスドメイン リクエスト Access-Control-Allow-Origin * 詳細な説明

序文

403 クロスオリジン エラーが発生しNo 'Access-Control-Allow-Origin' header is present on the requested resource 。

1. 解決策

Nginx 構成ファイルで次のパラメータを設定する必要があります。

位置 / { 
 アクセス制御許可オリジン * のヘッダーを追加します。
 add_header アクセス制御許可メソッド 'GET、POST、OPTIONS';
 add_header Access-Control-Allow-Headers 'DNT、X-Mx-ReqToken、Keep-Alive、User-Agent、X-Requested-With、If-Modified-Since、Cache-Control、Content-Type、Authorization';

 $request_method = 'OPTIONS'の場合{
  204を返します。
 }
}

上記の設定コードで問題を解決できます。詳しく学習したくない場合は、ここを読んでください =-=

II. 説明

1. アクセス制御許可オリジン

デフォルトでは、サーバーはドメインを越えることはできません。 Nginx サーバーに `Access-Control-Allow-Origin *` を設定すると、サーバーはすべてのリクエスト ソース (Origin) を受け入れることができる、つまりすべてのクロスドメイン リクエストを受け入れることができるようになります。

2. Access-Control-Allow-Headers は次のエラーを防ぐためのものです。

リクエスト ヘッダー フィールド Content-Type は、プリフライト応答の Access-Control-Allow-Headers によって許可されません。

このエラーは、現在のリクエストの Content-Type の値がサポートされていないことを示します。実際、これは私たちが開始した「application/json」タイプのリクエストによって発生しました。ここでは、プリフライト リクエストという概念が関係しています。以下の「プリフライト リクエスト」の概要を参照してください。

3. Access-Control-Allow-Methods は、次のエラーを防ぐためのものです。

プリフライト応答の Access-Control-Allow-Headers では Content-Type は許可されません。

4. OPTIONSに204レスポンスを追加するのは、POSTリクエストを送信してもNginxがアクセスを拒否するというエラーを処理するためです。

「プリフライトリクエスト」を送信する場合、メソッド OPTIONS が必要となるため、サーバーはこのメソッドを許可する必要があります。

3. 事前リクエスト

実際、上記の構成には W3C 標準である CROS (正式名称は Cross-origin resource sharing) が関係しており、これはクロスオリジン リクエストを解決するために提案されました。

クロスオリジン リソース共有 (CORS) 標準では、サーバーがどのオリジンがどのリソースにアクセスできるかを宣言できる一連の HTTP ヘッダー フィールドが追加されます。さらに、仕様では、サーバー データに副作用をもたらす可能性のある HTTP リクエスト メソッド (特に GET 以外の HTTP リクエスト、または特定の MIME タイプの POST リクエスト) の場合、ブラウザーは最初に OPTIONS メソッドを使用してプリフライト リクエストを開始し、サーバーがクロスドメイン リクエストを許可するかどうかを確認する必要があると規定されています。実際の HTTP リクエストは、サーバーが権限を確認した後にのみ開始されます。事前チェック要求への応答で、サーバーはクライアントに ID 資格情報 (Cookie や HTTP 認証関連データを含む) を運ぶ必要があるかどうかを通知することもできます。

実際、Content-Type フィールド タイプが application/json であるリクエストは、上記の特定の MIME タイプを持つ POST リクエストです。CORS によると、次の MIME タイプに属さない Content-Type は事前チェック リクエストです。

アプリケーション/x-www-form-urlencoded
マルチパート/フォームデータ
テキスト/プレーン

したがって、application/json リクエストは、正式な通信の前に「事前チェック」リクエストを追加します。この「事前チェック」リクエストは、ヘッダー情報 Access-Control-Request-Headers: Content-Type: を伝達します。

オプション /api/test HTTP/1.1
出典: http://foo.example
アクセス制御リクエストメソッド: POST
アクセス制御リクエストヘッダー: コンテンツタイプ
...一部省略

サーバーが応答したときに、返されたヘッダー情報に Access-Control-Allow-Headers: Content-Type が含まれていない場合は、デフォルト以外の Content-Type が受け入れられないことを意味します。次のエラーが発生します:

リクエスト ヘッダー フィールド Content-Type は、プリフライト応答の Access-Control-Allow-Headers によって許可されません。

参考記事:

• Ruan Yifeng [クロスオリジンリソース共有 CORS の詳細な説明]
• MDN ウェブ ドキュメント [HTTP アクセス制御 (CORS)]

要約する

以上がこの記事の全内容です。この記事の内容が皆様の勉強や仕事に何らかの参考学習価値をもたらすことを願います。123WORDPRESS.COM をご愛顧いただき、誠にありがとうございます。