More than 3 years have passed since last update.

Vue.jsでSPA - [9] 今更ながらCORSとそのエラーの回避方法

Last updated at 2020-04-05Posted at 2018-10-03

前回の続き

##前置き

CORSに関する記事はたくさんあるが、個人的に説明がいまいちわかりにくいなと思えたのでこれを書くことにした。個人的にわかりにくいと思った理由は以下：

ユースケースが適切な図で書かれてない
サーバ側、クライアント側という言葉で説明が書かれているが、Cross Originというくらいなので、オリジン（サーバ）は複数あり、その区別がつけにくい
なんの為にCORSの仕様があるのかの説明が不適切

何を読めばいいか

私にはこのページ異なるドメインのURLからデータを参照する方法がわかりやすかった。また、ここではCORS目的についても以下のように書かれている。

クロスオリジンはしばしば「悪意のあるスクリプトが意図しないサイトに裏で勝手に情報を送ることを防止するため」と誤解した説明がされています。しかし送信側のスクリプトと受信側のサーバの両方が攻撃者の配下であれば CORS に対応させ裏で情報を送らせることは容易です。ユーザを守るものではなくコンテンツ提供側を守る仕組みです。

なるほど。

CORSっているん？

いろいろ読んで、どう動くかはわかった。が、正直CORSを禁止するために各ブラウザ（user-agent）側でなんとかしようとしていることの意味はよくわかない。コンテンツ提供側を守ろうとした時に、ブラウザにそれを禁止する仕組みを入れることに意味があるのだろうか？どうせ curl やなんかなら普通に情報とれるんだからそのとった情報をあとはなんとでもできる。本当にCross Originでアクセスしてほしくないのなら、どうせコンテンツ提供側でも認証なりで守るんだろうから、ブラウザ側でなんとかする意味はなんなんだろうか....まあいいか。

CORSのエラー

Chrome

https://www.google.co.jp から https://your-url-one/ のリソース（API）を参照しようとした

Failed to load https://your-url-one/: Redirect from 'https://your-url-one/' to 'https://your-url-two' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://www.google.co.jp' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
The FetchEvent for "https://your-url-one/" resulted in a network error response: the promise was rejected.

###Safari

https://www.youtube.com から https://your-url-one/ のリソース（API）を参照しようとした

[Error] Cross-origin redirection to https://your-url-two denied by Cross-Origin Resource Sharing policy: Origin https://www.youtube.com is not allowed by Access-Control-Allow-Origin.
[Error] Failed to load resource: Cross-origin redirection to https://your-url-two denied by Cross-Origin Resource Sharing policy: Origin https://www.youtube.com is not allowed by Access-Control-Allow-Origin. (your-url-one, line 0)
[Error] XMLHttpRequest cannot load https://your-url-two due to access control checks.

証明書のエラー（Chrome）

Chromeの場合は証明書のチェックが先に動くので、オレオレ証明書だったりするとCORSのエラーの前に net::ERR_CERT_COMMON_NAME_INVALID がでるはず

##やりたかったことを思い出して、エラーを回避する

このあたりで、SPA開発がしたかったんだと思い出して、エラーの回避方法を。

###Chrome

証明書のエラーは以下のようにオプション付きでChromeを立ち上げることで回避

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --ignore-certificate-errors &> /dev/null

ただ、CORSのエラーは残る。調べると --disable-web-security というフラグをつけることで回避できるとの情報があるがこれは古くてもう動かない様子。このフラグ付きで起動すると、ブラウザ上にyou are using unsupported command line flag --disable web security と表示され，実際にCORSなAPIコールしたらエラーがでる．Chromeは詰んだか....

Safari

SafariはGUIからCORSのチェックを外すことができる。開発メニューを表示しておいて開発メニューからCORSを無効化できる。

次回

ということで、CORSやる上で、Chromeはチェック厳しいので、開発にはSafariつかって進めていくことにしよう

シリーズ

（余談）ヘッダをいじってみる

CORSに必要なヘッダを簡単に試してブラウザの挙動を確認するには、リソース提供元のAPIサーバにこれ WEBrickでCORS を使うと良さそう。HTTPのやりとりはこんなかんじ

Summary
URL: http://192.168.0.10:3000/
Status: 200 OK
Source: Network
Address: 192.168.0.10:3000

Request
GET / HTTP/1.1
Accept-Encoding: gzip, deflate
Host: 192.168.0.10:3000
Upgrade-Insecure-Requests: 1
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Connection: keep-alive
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/11.1.2 Safari/605.1.15
Accept-Language: en-us

Response
HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 630
Date: Tue, 11 Sep 2018 23:07:36 GMT
Connection: Keep-Alive
Server: WEBrick/1.3.1 (Ruby/1.9.3/2013-11-22)
Access-Control-Allow-Origin: *

Access-Control-Allow-Origin: * が帰ってきているのが確認できる

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up