CORSテストをローカル端末で実施する方法

はじめに

CORSとはCross-Origin Resource Sharingの略で、直訳するとオリジン間リソース共有です。通称コルスとも呼ばれます。

例えばJavaScriptを埋め込んでいるサイトがあるとして、そのスクリプトが別のサイトのリソース(HTMLなど)へアクセスする時に、下記のようなエラーが出た事が無いでしょうか。

Access to XMLHttpRequest at 'http://to-example.co.jp' from origin 'http://from-example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

この場合はスクリプトのリクエストを受けているサイトに、CORSのリクエストを拒否している可能性があります。この記事では、一応RoRにおけるCORS許可の設定方法を記述しますが、本題はその設定の試験を行う方法について解説しています。

実はJSを埋め込むサイトを再現しなくても、ローカル端末のブラウザからお手軽にテスト出来るのです。というのが今回やる事の要約になります。

※ちなみにオリジンとはURLの「スキーム(httpとか)」「ホスト」「ポート」を組み合わせたものの事を言います。

CORS許可

前置きが長くなってしまいましたがrack-corsというGEMを使ったCORS許可の設定を行っていきます。設定が終わっている方は読み飛ばして次の章だけお読み下さい。

まずはGemfileに下記を記述してbundle installして下さい。

gem 'rack-cors'

config/initializers/cors.rbが自動生成されるかと思います。されなければ素手で作成して下さい。中身は下記の通り。

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins '*'
    resource '*', headers: :any, methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end

originsにはアクセスを許可したいオリジンを指定します。例で言うところのJavaScriptが埋め込まれているサイトです。正規表現も使えます。

resourceには返したいリソースのPATHを指定します。例えばindex.htmlとか。同じく正規表現も使えます。

以上がRoR側の設定です。

テスト

いよいよ本題です。何でも良いので適当なサイトを開き、Chromeデベロッパーツールのコンソールを立ち上げて下記のスクリプトを入力して下さい。コピペで大丈夫です。

※ただしhttpリクエストでテストしたい場合は、http通信を許可しているサイトでないとテストが出来ません。今どきhttpのサイトの方が珍しいと思うので、httpリクエストを飛ばす方用のリンクだけ貼っておきます。

# https版
var jq = document.createElement('script');
jq.src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js';
document.getElementsByTagName('head')[0].appendChild(jq);

# http版
var jq = document.createElement('script');
jq.src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js';
document.getElementsByTagName('head')[0].appendChild(jq);

これでjqueryが使えるようになりました。そうしたらJavaScriptを同じ様にコンソールから実行してみて下さい。無いという方は下記を参考にしてみて下さい。

$(function(){
    $.ajax({
        url:'【自サイトのURL】',
        type:'GET',
        dataType:'html',
        timeout:1000,
        error:function() {
            alert("エラー");
        },
        success:function(html){
            console.log(html)
        }
    });
});

無事html(リソース)が取得出来れば成功です。

終わりに

如何でしたでしょうか。結論としてはデベロッパーツールって便利だよねとまとめられる様な内容でしたが、このテクニックは非常に汎用性が高いです。ディベロッパツールを使えば、ローカル端末からjsを使ってajax等の通信処理をテスト出来るという事を覚えておくと良いと思いました。

コメントを残す

はじめに

CORS許可

テスト

終わりに

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル