Nginxで複数Originを許可するCORS設定例

これはなに

Nginxで複数Originを許可するCORS設定をしたい場合に使えるコンフィグ例です。。
CORSの説明はしません。

設定

# conf.d/cors.conf
set $OKMETHOD $cors$request_method;

if ($OKMETHOD = 'OKOPTIONS') {
    add_header 'Access-Control-Allow-Origin' $http_origin;
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' '*';
    add_header 'Access-Control-Max-Age' 86400;
    add_header 'Access-Control-Expose-Headers' 'Content-Transfer-Encoding';

    add_header 'Content-Type' 'text/plain charset=UTF-8';
    add_header 'Content-Length' 0;
    return 204;
}

if ($OKMETHOD = 'OKPOST') {
    add_header 'Access-Control-Allow-Origin' $http_origin;
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' '*';
    add_header 'Access-Control-Expose-Headers' 'Content-Transfer-Encoding';
}

# site-enabled/example.com.conf
map $http_origin $cors {
    default "NG";
    "http://localhost:3000" "OK";
    "http://sub.example.com" "OK";
}

server {
    listen 80;
    server_name example.com;

    root /var/www/public;

    location / {
        index index.html;
    }

    location /api/ {
        include conf.d/cors.conf;
        proxy_pass http://127.0.0.1:8080;
    }
}

解説

Access-Control-Allow-Originヘッダに1つのOriginが含まれる場合しか受け付けないブラウザが多いと思います。
アクセス元Origin（$http_origin）をmapディレクティブで判断することで複数のOriginに対応したAccess-Control-Allow-Originを設定できます。

Nginxのmapディレクティブは、serverディレクティブに書けないため、server外にしています。
また、ifの複数条件とネストは許容されていないため、変数を結合することで条件判断をしています。

具体的には、mapディレクティブで条件一致した場合$corsにOKの文字が、それ以外ではNGの文字が入ります。
また、リクエストメソッド$METHODと組み合わせることで、OKPOSTやNGOPTIONSという文字列になり、ifで評価することができます。

Preflightリクエストのため、OPTIONS（No content）とPOSTを分けています。
今回はRPC APIを想定しているためPOSTとOPTIONSですが、他のメソッドにも対応可能です。