Nginxのクロスオリジン問題はどのように解決しますか？

1年 ago
光, 明
1 minute

Nginxのクロスドメインの問題を解決するには、次の方法を取ることができます：

  1. Nginxの設定ファイルにクロスオリジン関連のヘッダー情報を追加する：以下の内容をNginxの設定ファイルに追加することで、クロスオリジンアクセスを許可できます。
location / {
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
    add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
    
    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain charset=UTF-8';
        add_header 'Content-Length' 0;
        return 204;
    }
}
  1. Nginxを使用したプロキシ機能：フロントエンドとバックエンドのサービスが異なるドメインにある場合、Nginxのプロキシ機能を使ってクロスドメインの問題を解決できます。フロントエンドのリクエストをバックエンドのドメインにプロキシし、クロスドメインの問題を回避できます。
location /api/ {
    proxy_pass http://backend-server;
}
  1. Nginxのリバースプロキシ機能を使用すると、フロントエンドとバックエンドのサービスが同じドメイン内にあっても異なるポートである場合、Nginxのリバースプロキシ機能を使ってクロスオリジンの問題を解決できます。フロントエンドのリクエストポートをバックエンドのポートにマッピングすることで、クロスオリジンの問題を回避できます。
location / {
    proxy_pass http://backend-server:8080;
}

実際の状況に応じて適切な方法を選択して、Nginxのクロスドメイン問題を解決するいくつかの一般的な方法があります。

bannerAds