Nginxでフロントエンドのドメイン間問題を解決するにはどうすればいいですか?

前言
静的ページを開発するとき、Vueのようなアプリケーションでは、ドメイン間である可能性が高いインタフェースを呼び出すことがよくあります.ブラウザはcross-originの問題を報告します.
最も簡単な解決策は、ブラウザをセキュリティの問題を無視して、disable-web-securityを設定することです.しかし、この方式でPCページを開発するのはまあまあで、モバイル側のページではだめです.
解決策
Nginxを使用してリクエストを転送します.ドメイン間インタフェースをドメインを変調するインタフェースとして書き、これらのインタフェースを真のリクエストアドレスに転送します.
くりを一つあげる
例えばVueアプリケーションを開発しています.
当初:
デバッグページは次のとおりです.http://192.168.1.100:8080/
要求されたインタフェースは次のとおりです.http://ni.hao.sao/api/get/info
ステップ1:
要求されたインタフェースは次のとおりです.http://192.168.1.100:8080/api/get/info
PS:これでドメイン間問題を解決しました.
ステップ2:
Nginxをインストール後、/usr/local/etc/nginx/ディレクトリ(これはMac)に移動し、nginxを変更します.confファイル.
手順3:
デフォルトのserver構成をコメントします.
以下に追加します.

    server{
        listen 8888;
        server_name  192.168.1.100;
 
        location /{
            proxy_pass http://192.168.1.100:8080;
        }
 
        location /api{
            proxy_pass http://ni.hao.sao/api;
        }
    }

保存後、Nginxを起動します.
PS:Nginxの構成をよく知る必要はなく、簡単です.
手順4:
アクセス:http://192.168.1.100:8888/
片付ける.
PS:アクセスポートは「8888」で、他のドメインのアドレスがlocationを追加し続けていればよいことに注意してください.
エラー・デモンストレーション
最初はNginxの構成がよくわかりませんでしたが、以下のように構成できると思います.

    server{
        listen 8080;
        server_name  192.168.1.100;
 
        location /api{
            proxy_pass http://ni.hao.sao/api;
        }
    }

このように書くのは、Nginxが8080のリクエストを傍受して、一致するリクエストだけを転送することができると思います.Nginxがそう書いた後、8080ポートを占有する必要があることに気づかなかった.
ポートを占有する必要がある以上、他の同じプロトコルのプロセスに占有されないため、開発されたページは8080ポートで有効にできません.同僚に指摘されて、やっとこのことを思い出して、考えを変えて、一番上の方法がありました.
まとめ
実は開発デバッグの時だけでなく、生産環境でもこのように遊ぶことができます.Nginxでリクエストを転送すると、デプロイする静的ページをリクエストインタフェースと同じドメインに置く必要がなくなります.
ふろく
リクエストに問題が発生し、Nginxのエラーが検出された場合は、Nginxのerrorを見つける必要があります.ロゴ、原因がわかります.
前提はnginxである.conf構成error.log:

error_log  logs/error.log;

error.ロゴはMacの位置にあります.

/usr/local/Cellar/nginx/1.15.8/logs/error.log

 
本文はオリジナルの文章で、転載して元の出所を保留して、簡単に源を遡って、もし間違いがあるならば、ありがとうございます.
本住所:http://www.cnblogs.com/lovesong/p/10269793.html