クロスドメインの問題を解決するためのNginxの実用的な方法

フロントエンドとバックエンドを分離し、nginxを使用してクロスドメインの問題を解決する

フロントエンド: vue.js+nodejs+webpack

舞台裏: SpringBoot

リバースプロキシサーバー: nginx

アイデア: フロントエンド コードをパッケージ化し、nginx が静的リソースを指すようにし、nginx がバックグラウンド リクエストを転送します。

1. フロントエンドコードをパッケージ化します。

npm 実行ビルド

dist フォルダーが生成されます。 index.html ファイルと静的フォルダーが含まれています。パスは、例としてローカルの場所に基づいています。

/ユーザー/xxx/ideaProjects/webtest/dist

2. 開く

/usr/local/etc/nginx ディレクトリの nginx.conf ファイルに、サーバーに次の内容を追加します。

listen 80; #元の8080、競合を避けるため80に変更

  server_name ローカルホスト;

 

  #文字セット koi8-r;

 

  #access_log ログ/host.access.log メイン;

 

 

  位置 / {

   ルート /Users/xxx/ideaProjects/webtest/dist;

   インデックス index.html;

    

   # これは、Vue、Angular、React が H5 の履歴を使用するときに書き換えの問題を処理するために使用されます。if (!-e $request_filename) {

    最後に ^(.*) /index.html を書き換えます。

    壊す;

   }

  }

 

 

  #プロキシサーバーインターフェースの場所 /api/ {

   proxy_pass http://localhost:8080/;# プロキシインターフェースアドレス}

テスト

フロントエンドはリクエスト http://localhost/test を送信し、vue-router はそれを http://localhost/api/demo/1 にリダイレクトし、実際のアクセスは http://localhost:8080/demo/1 になります。

バックエンドに直接リクエストを送信します。http://localhost/api/demo/1 にアクセスします。実際のアクセスは次のようになります: http://localhost:8080/demo/1

コンテンツ拡張の考え方:

1）。
# プロキシサーバーインターフェース

場所 /api/ {
proxy_pass http://localhost:8080/;# プロキシインターフェースアドレス}

プロキシインターフェースのアドレスは 8080 までしか到達しないので、バックグラウンドプロジェクトの名前が自動的に追加されるのでしょうか? ? ? たとえば、インターフェースは http://148.70.110.87:8080/プロジェクト名/メソッド名です。 。 。

2) リクエストは .js で行われます。Nginx は上記のように設定されていますが、リクエストは http://148.70.110.87/api/index2 404 (Not Found) で失敗します。

axios.post('/api/index2')
.then( (レスポンス) => {
console.log(応答);
})
.catch( (エラー)=> {
コンソール.log(エラー);
});

3). 3 番目のステップであるテストがよくわかりません。関連するコードを提供していただければ幸いです。