跨域対策Nginxの設定

什么是浏览器同源策略？#

同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。

同源是指 "协议 + 域名 + 端口" 三者相同，即便两个不同的域名指向同一个 ip 地址，也非同源。

如何实现跨域？#

跨域是个比较古老的命题了，历史上跨域的实现手段有很多，我们现在主要介绍 Nginx 的跨域方案，其余的方案我们就不深入讨论了。

方便的跨域方案 Nginx#

nginx は非常に強力なウェブサーバーであり、その利点は軽量で、起動が速く、高並行性です。

現在の新しいプロジェクトでは、nginx はほぼ最初の選択肢です。通常、node または go で開発されたサービスは、nginx のリバースプロキシを経由する必要があります。

リバースプロキシの原理は非常に単純で、すべてのクライアントのリクエストはまず nginx で処理され、nginx がプロキシサーバーとしてリクエストを転送します。これにより、同一オリジンポリシーが回避されます。

#プロセス、CPUの数に応じて調整できます
worker_processes  1;

events {
    #接続数
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;

    #接続タイムアウト、この時間後にサーバーは接続を閉じます。
    keepalive_timeout  10;

    # gizp圧縮
    gzip  on;

    # nginxに直接リクエストすると、クロスオリジンエラーが発生しますが、ここでクロスオリジンを許可します
    # プロキシアドレスがすでにクロスオリジンを許可している場合は、これらは不要です。そうでない場合はエラーが発生します（これにより、nginxのクロスオリジンは意味をなさなくなります）
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Headers X-Requested-With;
    add_header Access-Control-Allow-Methods GET,POST,OPTIONS;

    # sreverモジュールの設定はhttpモジュールのサブモジュールであり、仮想アクセスホストを定義するために使用されます
    server {
        listen       80;
        server_name  localhost;
        
        # ルートパスをindex.htmlに指定
        location / {
            root   html;
            index  index.html index.htm;
        }

        # localhost/apiのリクエストは192.168.0.103:8080に転送されます
        location /api {
            rewrite ^/b/(.*)$ /$1 break; # ローカルインターフェース/apiのプレフィックスを削除すると、404エラーが発生します
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_pass http://192.168.0.103:8080; # 転送先アドレス
        }
        
        # エラーページを/50x.htmlにリダイレクト
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}