回答編集履歴

1 追記

terumin

terumin score 5

2018/02/02 09:13  投稿

>Access-Control-Allow-Headers: Origin, Authorization, Accept
をコメントアウトしたうえで、
>add_header X-Frame-Options "ALLOW";
を付け足す、が正解でした。
正解レスポンスヘッダ
-----
< Access-Control-Allow-Origin: *
< Access-Control-Allow-Methods: POST, GET, OPTIONS
< Access-Control-Allow-Credentials: true
< X-Frame-Options: ALLOW
nginx.conf
-----
```
   location / {
       add_header Access-Control-Allow-Origin *;
       add_header Access-Control-Allow-Methods "POST, GET, OPTIONS";
#       add_header Access-Control-Allow-Headers "Origin, Authorization, Accept";
       add_header Access-Control-Allow-Credentials true;
       add_header X-Frame-Options "ALLOW";
```
```
アプリケーションとのコンフリクトに注意
-----
アプリケーション側でX-Frame-Optionsを付け足す設定になっている場合があり、
自分の場合は[Ruby on RailsがデフォルトでSAMEORIGINを返すようになっていた](https://programming.wikihub.io/@r7kamura/20160617011257)ため、
Chromeではコンフリクトエラーが発生。
>エラー
```
Refused to display 'https://hoge.com' in a frame because it set multiple 'X-Frame-Options' headers with conflicting values ('SAMEORIGIN, ALLOW'). Falling back to 'deny'
```
>ヘッダ
```
* Server nginx/1.10.1 is not blacklisted
< Server: nginx/1.10.1
< Date: Thu, 01 Feb 2018 23:59:11 GMT
< Content-Type: text/html; charset=utf-8
< Transfer-Encoding: chunked
< Connection: keep-alive
< X-Frame-Options: SAMEORIGIN
< X-XSS-Protection: 1; mode=block
< X-Content-Type-Options: nosniff
< ETag: W/"460d2cbdc5ecf1d7417e99fc879fd127"
< Cache-Control: max-age=0, private, must-revalidate
< X-Request-Id: 5c24d399-9c62-4ffe-b4fa-47caed6409e9
< X-Runtime: 0.013970
< Access-Control-Allow-Origin: *
< Access-Control-Allow-Methods: POST, GET, OPTIONS
< Access-Control-Allow-Headers: *
< Access-Control-Allow-Credentials: true
< X-Frame-Options: ALLOW
```
今回のケースでは結局、nginxの設定を削除し、rails側の設定でALLOWとする。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る