nginxのクロスドメイン問題を解決する方法

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

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

バックエンド: springboot

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

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

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

npm run build

により dist フォルダーが生成されます。 Index.html ファイルと静的フォルダーが含まれています。例としてローカル パスを取り上げます:

/users/xxx/ideaprojects/webtest/dist

2。 を開きます。 /usr/local/etc/nginx ディレクトリの

nginx.conf に次の内容をサーバーに追加します:

listen  80; #原为8080，避免冲突，更改为80

  server_name localhost;

 

  #charset koi8-r;

 

  #access_log logs/host.access.log main;

 

 

  location / {

   root /users/xxx/ideaprojects/webtest/dist;

   index index.html;

    

   # 此处用于处理 vue、angular、react 使用h5 的 history时 重写的问题

   if (!-e $request_filename) {

    rewrite ^(.*) /index.html last;

    break;

   }

  }

 

 

  # 代理服务端接口

  location /api/ {

   proxy_pass http://localhost:8080/;# 代理接口地址

  }

Test

フロント エンドリクエストを送信します: 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).
# プロキシ サーバー インターフェイス

location /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( (response) =>{
console.log(response);
})
.catch( (error)=> {
console.log(error);
});

## です。 # 3). 3 番目のステップはテストです。本当に理解できません。関連するコードがあれば幸いです。

以上がnginxのクロスドメイン問題を解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。