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

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 をご愛顧いただき、誠にありがとうございます。

以下もご興味があるかもしれません:
  • jQueryとJSONPを使用してクロスドメインアクセスの問題を簡単に解決する
  • jsonpを使用してクロスドメインの問題を完全に解決する
  • jQuery $.getJSON() クロスドメインリクエスト
  • js クロスドメイン リクエスト データの 3 つの一般的な方法
  • クロスドメインの問題を解決するための js フロントエンドの 8 つのソリューション (最新かつ最も完全)
  • nginx を使用して Cookie のクロスドメイン アクセスを解決する方法
  • 無効な Nginx クロスドメイン設定 Access-Control-Allow-Origin の解決策
  • NginxサーバーでAJAXクロスドメインリクエストを処理するための設定方法の説明
  • Java のクロスドメイン問題の処理の詳細な説明
  • Javaでクロスドメインリクエストを解決する2つの方法
  • vue+Java バックエンドでデバッグするときにクロスドメインの問題を解決する方法
  • CORS を使用して JavaWeb のクロスドメイン リクエストの問題を実装する方法
  • Javaリクエストのクロスドメイン問題の解決の詳細な例
  • JS クロスドメイン (Access-Control-Allow-Origin) フロントエンドおよびバックエンド ソリューションの詳細な説明

<<:  ネイティブJSで禁止すべきメソッドの記述

>>:  mysqld_multi を使用して単一のマシンに複数のインスタンスをデプロイする方法に関する MySQL チュートリアル

推薦する

MySQL マスタースレーブレプリケーション 読み書き分離の設定方法の詳細説明

1. 説明前回は、MySQL のインストールと構成、MySQL ステートメントの使用、MySQL デ...

CSS で 2 つの固定列と 1 つの適応列を実装するいくつかの方法

この記事では、CSS で 2 つの固定列と 1 つのアダプティブ列を実装するいくつかの方法を紹介し、...

ポートマッピング後に Docker コンテナが突然接続に失敗する問題のトラブルシューティング プロセス

1. 背景通常、外部サービスを提供する必要がある Docker コンテナの場合、起動時に -p コマ...

設定ファイルを変更した後、操作を再開します

余計なことは言わないで、コードだけ見てみましょう〜 # docker-compose をダウン # ...

Nginx ソースコード調査における nginx 電流制限モジュールの詳細な説明

目次1. 電流制限アルゴリズム2. nginxの基礎知識4. 実戦要約する高並行性システムには、キャ...

JS配列ループ方式と効率分析の比較

配列メソッドJavaScript には多くの配列メソッドが用意されています。次の図は、ほとんどの配列...

ローカル Docker に Postgres 12 + pgadmin をインストールする方法 (Apple M1 をサポート)

目次導入Intel CPUをサポートApple M1のサポートテスト導入このプロジェクトでは最近、P...

この記事では、Vue 3.0 レスポンシブの使い方を説明します。

目次ユースケースリアクティブAPI関連プロセス反応的なcreateReactiveObjectはレス...

WeChatアプレットbindtapとcatchtapの違いの詳細な説明

目次1. イベントとは何ですか? 2. イベントの使い方3. バインドタップとキャッチタップの違い4...

Chrome プラグイン (拡張機能) 開発ガイド (完全デモ)

目次前面に書かれた序文ChromeプラグインとはChrome プラグイン開発を学ぶことの意義は何です...

Docker のホスト間コンテナ通信オーバーレイ実装プロセスの詳細な説明

サーバーも 2 つあります。準備:コンテナのホスト名を設定する consul: kv タイプのストレ...

SASSで変数のデフォルト値を使用する方法

SASS で定義された変数では、後で設定された値によって古い値が上書きされます。 $色: 赤; $色...

スクロール画像バーを実現するための CSS サンプルコード

一部の Web サイトでは、画像が連続的にスクロールしているのをよく見かけます。この効果は、CSS ...

Ubuntu 20.04 LTSの詳細なインストール履歴

この記事では、USB ブート ディスクの作成とシステムのインストールについて説明します。システム構成...

HTML テキストエスケープのヒント

今日、CSDN で HTML テキスト エスケープのちょっとしたトリックを見ましたが、とても簡単です...