原理
クロスドメインを解決するための nginx の原理をよりよく理解するために、まずクロスドメインがどのように生成されるかを理解しましょう。
ブラウザの同一オリジンポリシーにより、クロスドメインが発生します。たとえば、送信される非同期リクエストは、2 つの異なるポート、2 つの異なるプロトコル、または異なるドメイン名など、2 つの異なるソースからのものです。セキュリティ上の理由から、ブラウザは同一生成元ポリシーを生成し、同じ場所からのもの以外のポリシーは対話できません。同一オリジン ポリシーはブラウザ内にのみ存在します。つまり、ブラウザはサーバーと通信するときに同一オリジン ポリシーに従う必要があり、サーバーとサーバーの間で同一オリジン ポリシーに従う必要はありません。Nginx はブラウザとサーバーの間のプロキシ サーバーとして機能し、ブラウザと同じソースからのデータ送信を可能にします。
構成
1. まずリクエストインターフェイスを分析します
axios.get('http://www.aaa.com:8081/api/blog/getList').then(res=>{
console.log(res)
})
ここで要求されるサーバー インターフェイス アドレスは http://localhost:8081/api/blog/getList であり、nginx を構成できます。
2. リクエストを Web サイトと同じ送信元アドレスに変更します。
現在リクエストを送信している Web サイトのアドレスが http://www.aaa.com (デフォルトのポート 80) であると仮定すると、リクエストのアドレスを Web サイトと同じ発信元のアドレスに変更します。
axios.get('http://www.aaa.com/api/blog/getList').then(res=>{
console.log(res)
})
3. /…/nginx/conf ディレクトリで nginx.conf ファイルを見つけ、設定用のファイルを入力します
http
{
...
server
{
#表示监听发送请求的地址(www.aaa.com:80)
listen 80;
server_name www.aaa.com;
#如果监听到请求接口地址是 www.aaa.com/api/blog/getList ，nginx就向http://www.aaa.com:8081/api/blog/getList 这个地址发送请求
location /api/ {
#判过滤出含有api的请求
proxy_pass http://www.aaa.com:8081; #真实服务器的地址
}
}
}
最も単純な構成がここに実装されています。より具体的な構成プロパティが必要な場合は、nginx 構成の詳細を参照してください。
4. 構成ファイル (nginx.conf) をテストし、nginx を再起動します。
4.1. テスト設定ファイル:
nginx -t
4.2. 次のステートメントを実行して nginx を再起動します
nginx -s reload
また
#停止nginx
nginx -s stop
#启动nginx
nginx
上記の操作を完了してリクエストを送信すると、データが正常に取得できます。これにより、nginx のフォワード プロキシが実現され、クロスドメインの問題が解決されます。