背景

現在のWebブラウザでは、same-origin policy(同一生成元ポリシー)が適用される

CORSとは

Cross-Origin Resource Sharingの略称
CORSでは、データのアクセスを許可できるWebサイトに対してはOriginを越えたアクセスを可能になる

HTTP requests

Origin ヘッダーを含んでいる

例

Origin: http://localhost:9191

HTTP responses

以下のヘッダーを含んでいる

Access-Control-Allow-Origin
Access-Control-Allow-Methods
Access-Control-Max-Age

例

Access-Control-Allow-Origin: http://localhost:9191
Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT
Access-Control-Max-Age: 1728000

example

クライアント側の対応(javascript)

function request(){
      $.ajax({
        type: "POST",
        url: "http://localhost:9292/index",
        dataType: 'json',
        success: function (data){
          alert("success");
        },
        error: function (data){
          alert("error");
        }
      })
    }

サーバー側に、CORSを対応していない場合

No 'Access-Control-Allow-Origin' header is present on the requested resourceエラーが出た
サーバー側からレスポンスが戻ったが、ブラウザより禁止された

サーバー側の対応(例：ruby)

rackの場合は、以下のコードをconfig.ruに追加

use Rack::Cors do
  allow do
    origins 'localhost:9191'
    resource '*', headers: :any, methods: [:get, :post, :options, :put]
  end
end

レスポンスが２００戻った

aws s3に、CORS対応

バケットのプロパティ -> Permissions -> Edit CORS Configuration

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

CORS紹介

背景

CORSとは

HTTP requests

例

HTTP responses

以下のヘッダーを含んでいる

例

example

クライアント側の対応(javascript)

サーバー側に、CORSを対応していない場合

サーバー側の対応(例：ruby)

aws s3に、CORS対応

参照