NginxでCORS設定している時に40x,50xのHTTPステータスでもCORSエラーが出ないようにしたい

はじめに

モバイルアプリや、マイロサービスが進んできている昨今において、リクエスト元とリクエスト先のドメインが必ず同じとは限らない状況が多々あると思います。

そこで、Javascriptだと回避策としてJSONP使うかCORS設定するか？がメジャーどころですが、今回は後者のCORS設定についてです。 HTTPサーバーはNginxを利用しています。

直面した事

NginxでCORS設定していて、何らかの原因、例えばサーバーサイドのプログラムにエラーがあって500番のHTTPレスポンスが返されるとします。その場合に、なぜかCORSのエラーが出るといった現象に遭遇しました。

localhost:5555→localhost:1000 にリクエストした時に502 BadGatewayをわざと発生させて、そうするとアクセス元のブラウザではCORSのエラーが出ます。

Javascriptで開発していると必ず１度はみるこのエラーです↓

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin

おかしいな？、なぜ急にCORSエラーが？？と原因が分からなかったので調べてみました。

設定しているNginxのCORS設定

至ってシンプルでこんな感じに設定していました。 やっている事として

• 80番に来たリクエストを8080に転送しています。
• OPTIONリクエストの場合はもろもろヘッダをつけてステータスコード204でリターン
• その他のリクエストははもろもろヘッダを付与

server {
    listen       80;
    server_name  localhost;

    location / {

     add_header Access-Control-Allow-Origin *;
     add_header Access-Control-Allow-Methods "GET, POST, OPTIONS, PUT, DELETE";
     add_header Access-Control-Allow-Headers "Origin, Authorization, Accept, Cache-Control, Content-Type";

      if ($request_method = OPTIONS ) {
       add_header Access-Control-Allow-Origin *;
       add_header Access-Control-Allow-Methods "GET, POST, OPTIONS, PUT, DELETE";
       add_header Access-Control-Allow-Headers "Origin, Authorization, Accept, Cache-Control, Content-Type";
       add_header Content-Type text/plain;
      return 204;
     }

    proxy_pass http://localhost:8080;
   }
}

CORSのエラーが出ていた原因

add_header Access-Control-Allow-Originの設定が原因でした。 ステータスコードが40x番台50x番台の時にもCORSの処理をちゃんと行うにはOPTIONS以外のリクエストのところにalwaysを付与してあげる必要があります。

location / {

     add_header Access-Control-Allow-Origin * always;

こんな感じで設定していてば動くようになります。

先程までのCORSエラーとは変わって、502 Bad Gatewayのエラーだけが表示されるようになりました。

xvideos見て寝ます