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 チュートリアル

推薦する

HTML ページをスクロールするときに一部のコンテンツを固定位置に固定する方法

この記事では主に、レイアウトに役立つ、HTML ページ内の一部のコンテンツを固定してスクロール時にス...

CSS ハック \9 と \0 は IE11\IE9\IE8 のハッキングには機能しない可能性があります

Web ページやフォームを設計するたびに、さまざまなブラウザ、特に IE ファミリの互換性の問題に悩...

MySQL 8.0 ウィンドウ関数の紹介と概要

序文MySQL 8.0 より前は、Oracle、SQL SERVER、PostgreSQL などの他...

dockerプライベート倉庫の構築と利用の詳細説明

1. リポジトリイメージをダウンロードする docker プルレジストリ 2. プライベートウェアハ...

VMware に Centos7 をインストールした後に外部ネットワークに ping できない問題を解決する

クラスターを構成する際に問題が発生しました。当初は 3 台の仮想マシンすべてが外部ネットワークに p...

WeChatアプレットでQRコードを識別するために長押しする実装プロセス

序文公式アカウントのQRコードは長押しで認識できることは皆さんご存じですが、ミニプログラムに対する制...

複数のドメイン名、ポート、IP仮想ホストに基づくNginx構成

1. タイプの導入1.1 ドメインベースの仮想ホスティングいわゆるドメイン名ベースの仮想ホストとは、...

Vueダイナミックフォームの詳細な応用

概要バックグラウンド管理システムには多くのフォーム要件があります。データをjson 形式で書き込み、...

CentOS 上の Docker に Jupyter をインストールしてポートを開く方法

目次jupyterをインストールするDocker ポートマッピングjupyterをインストールするp...

SpringBoot と Docker の統合の詳細なプロセス

目次1. デモプロジェクト1.1 インターフェースの準備1.2 構成の準備2. Dockerがリモー...

MySQLをシンプルに学ぶ

序文データベースは常に私の弱点でした。自分の経験 (python+sqlalchemy) を組み合わ...

SSH接続を介してXshellを使用したUbuntu 20.04で報告されたサービス問題の詳細な説明

1. 最近、Ubuntu の新しいバージョンをインストールしました。/etc/ssh/sshd_co...

Ubuntu で G++ を使用して CPP ファイルをコンパイルする

g++ を使用して初めて cpp ファイルをコンパイルしたとき、未定義の参照エラーが報告されました。...

MySQLトリガーの使用

目次1. トリガーの紹介1. トリガーとは何ですか? 2. トリガーの特徴2. トリガーを作成する1...

Spring Boot Docker パッケージング ツールの概要

目次スプリングブートDocker spring-boot-maven-プラグインSpotify Ma...