CORS

CORSとは

Cross Origin Resource Sharing
オリジン間リソース共有

異なるオリジン(=ドメイン)のサーバーリソースのアクセスを許可する事
=ブラウザで指定したURLのドメインとは別のドメインのリソースをJavaScriptを用いて取得する事

クライアントからのリクエスト

サイト(https://test1.com)へのリクエスト時にOriginヘッダで、別オリジンのドメインを指定

GET /api HTTP/1.1
Origin: https://test2.com

サーバーからのレスポンス

サーバ側で「Originヘッダのサイトが信頼できる」と判断された場合、
Access-Control-Allow-Originヘッダで別オリジンのドメインが返される。
返された場合のみ別オリジンのサイトへアクセスできる

HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://test2.com

オリジン

プロトコル + ドメイン + ポート番号の組み合わせ
https://office-yone.com:80
https://office-yone.com:8080
https://office-yone.com:80
は別オリジン

同一生成元ポリシー

Same Origin Policy

クライアントからあるサイト(https://test1.com)のデータを取得中に、XHR等で別ドメインのサイト(https://test2.com)にアクセスできなくする仕様

XMLHttpRequest

略してXHR
JavaScriptを使ってブラウザとWEBサーバ間でデータの送受信を行う際に利用するオブジェクト

Ajaxでの使用例
$.ajax({
 〜
}).done(function (data) {
 〜
}).fail(function (XMLHttpRequest, textStatus, errorThrown) {
 console.log(`XMLHttpRequest:${XMLHttpRequest.status}`);
 〜
});

Vue

前の記事

Vue コンポーネント
Vue

次の記事

Vue VeeValidateプラグイン