MacのSafariでCORSを一時的に無効にする。

CORS(Cross Origin Resourse Sharing)により接続できない

Local環境から外部のAPIを実行する際などに、以下のようなCORSエラーがでて実行できない場合があります。

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

これはCORSという制限により外部へ接続できなかった場合に発生します。

CORSとは、Ajaxで通信する場合に異なるドメイン間での通信を制限する仕組みです。

「XmlHttpRequestやjQueryのajaxを利用して通信する場合は同じドメイン同士でないと通信できません」ということです。

一般的なブラウザにはこの制限がデフォルトで入っており、逆にこれが無いとアクセス先のJavaScriptで好き放題できてしまいます。

「全く関係の無いサイトからAmazonで勝手に商品購入させる」といった処理もできてしまうかもしれません。

本来、この制限はAPIの提供側にアクセスを許可してもらうことで接続できるようになるのですが、それが不可能な場合も多いかと思います。

今回はそんなCORSの制限をブラウザ側で一時的に無効にする方法がありましたので紹介します。

ブラウザはMacのSafariを利用します。

Safari以外のブラウザ(Chromeなど)でも同様にCORSを無効にする方法があるようですが、Safariが一番簡単に実施できそうでした。

CORS制限を無効にする手順

開発メニューを表示

「環境設定」を開いて、詳細タブの「メニューバーに"開発"メニューを表示」のチェックを入れる。

クロスオリジンの制限を無効にする。

メニューに「開発」が表示されるようになっているので、「開発」から「クロスオリジンの制限を無効にする」を選択する。

まとめ

これでCORSによる制限がなくなり、Ajaxで通信できるようになっているはずです。

開発などする場合には非常に便利ですが、このまま他のサイトへアクセスするのは危険ですので、用が済んだら設定は戻しておきましょう。

おしまい。