NginxのリバプロでCORSとサヨナラする

はじめに

いなたつアドカレの二十六(ry

はい、アドカレロスなので勝手に26日目書きます。

docker-composeを用いてフロントエンドとバックエンドを分離して開発するなんて場合は最近多々あるのではないでしょうか？
CORSに悩まされますよね。つらい。解決しましょう。

リバプロってなんだ？

リバースプロキシの略称ですね。
HTTPからアプリケーションサーバにリクエストを飛ばしたりするやつです。

Nginxの設定

default.conf

server {
    listen 80;
    root /usr/share/nginx/html;
    error_page 500 502 503 504 /error.html;
    location /error.html {
        internal;
    }

    location /api/ {
        proxy_pass http://[CONTANER_NAME]:8000;
        proxy_set_header Host $host:$server_port;
        proxy_set_header X-Forwarded-Host $server_name;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
    
}

このように設定ファイルを書くことで/api/へのリクエストを任意の場所へアクセスを飛ばすことができます。
ここで、任意のCONTAINER_NAMEで任意のポート番号backend:8000みたいな感じバックエンドへと飛ばします。

/api/以外から始まるものは普段通り root /usr/share/nginx/html を参照してファイルを返却してくれ、かつ/api/のアクセスはapiにアクセスするといった感じです。

nginxでファイルを返したい時も、リバースプロキシでapiを叩きたい場合もhoge.com/hoge or hoge.com/api/hogeを叩くかで振り分けているため、オリジンが同一になるため、CORSにかかりません。

これで、あなたもCORSとはぐっばいです。