クロスドメインを解決する2つの方法でプロジェクトに反応する

最近、私はhttpの関連知識を研究していて、クロスドメインに関する問題を見ました。私は通常、自分の仕事の中で常にクロスドメインの問題を聞いているので、それを詳細に調査し、将来の参考のためにここに記録します。

1.クロスドメインがあるのはなぜですか？

ブラウザは、以下の同一生成元ポリシーを（scheme(协议)、host(主机)とport(端口)同じでした同源）。

非相同サイトにはそのような制限があります：

相手のDOMを読み取って変更することはできません
相手のCookie、IndexDB、LocalStorageを読み取らないでください
XMLHttpRequestリクエストを制限します。（以下のトピックはこれに焦点を当てています）

ブラウザーがターゲットURlにAjaxリクエストを送信すると、現在のURLとターゲットURLのソースが異なる限り、クロスドメインが生成され、これがと呼ばれ跨域请求ます。

2.ソリューション

JSONP
CORS（クロスドメインリソース共有）
Nginx

ここでは、最初の2つの方法を簡単に紹介します。

[1] JSONP（参考記事）

JSONPは、サーバーとクライアント間のクロスオリジン通信の一般的な方法です。最大の機能はシンプルで適切な互換性（低レベルのIEとの互換性）ですが、欠点は取得リクエストのみをサポートし、投稿リクエストはサポートしないことです。

HTMLタグでは、scriptやimgなどの一部のタグには、リソースを取得するためのタグに対するクロスドメイン制限がありません。

核となるアイデア：Webページ<script>元素は1を追加してサーバーからJSONデータを要求し、サーバーが要求を受信すると、データは指定された名前でコールバック関数のパラメーター位置に戻されます。

[2] CORS（参考記事）

一般的なクロスドメインリクエスト：サーバー側でAccess-Control-Allow-Originを設定するだけで済みます
Cookieを使用したクロスドメインリクエスト：フロントエンドとバックエンドの両方を設定する必要があります（フロントエンド設定：Cookieがあるかどうかを判別するためのxhr.withCredentialsフィールドに基づく）

この記事では主に、Reactプロジェクトのソリューションであるプロキシとngnixを紹介します。

3、プロキシ

package.jsonファイルでプロキシ設定を使用すると、クロスドメインの問題を解決できます。

"proxy" ：{
     "/ api" ：{
        "target"： "http://xxx.xxx.com" 、
        "changeOrigin"：true 、
        "pathRewrite" ：{
         "^ / api"： "" 
    } 
     } 
 }

target：インターフェースのドメイン名
changeOrigin：プロキシをオンにする
pathRewrite：/apiリクエストされたインターフェースのドメイン名と一致するために使用され、インターフェース名は/admin/loginであるため、実際のリクエストに書き込む必要/api/admin/loginがありますが、実際にリクエストしたアドレスにはapiプレフィックスが付いていないため、pathRewriteを使用してアドレスを書き換える必要がありますプレフィックスは要求時に削除されます。

4、nginx

上記の方法は、Reactプロジェクトの開発環境のクロスドメイン問題を解決できますが、本番環境のクロスドメイン問題（たまに遭遇する）を解決することはできません。

Macインストールnginxおよび⚠️注：次の記事をご覧ください
機能：

httpサーバーは、独立してhttpサービスを提供できます。
仮想ホスト：複数のドメイン名が同じサーバーを指し、サーバーは異なるドメイン名に従ってリクエストを異なるアプリケーションサーバーに転送します。
リバースプロキシ：負荷分散、異なるサーバーへの要求の転送

3.デフォルトの構成ファイル

    場所/ { 
        ルートhtml; 
        ＃ファイルルートディレクトリインデックスindex.html index.htm;＃デフォルトのスタートページ
    }

4.構成ファイルを変更します

location / { 
            root    / Users / zhangsan / Documents / test / build; 
            ＃パッケージ化されたファイルを直接指す
             index.html index.htm; 
        } 

 location / api { 書き換える^。+ api /?(.*)$ / $ 1 break ; 
            proxy_pass http：// XX.XXX.com;＃APIへのプロキシアドレス 
        }

クロスドメインを解決する2つの方法でプロジェクトに反応する

おすすめ