37
38

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

おにぎり万太郎Advent Calendar 2019

Day 6

CORSについてざっくり理解する

Last updated at Posted at 2019-12-05

はじめに

  • API開発をしていると以下のようなエラーに遭遇することがあります
Cross-Origin Request Blocked: The Same Origin Policy disallows
reading the remote resource at https://some-url-here. (Reason:
additional information here).
  • なにが原因でこのエラーが起こり、どう解消したらいいのかをざっくりまとめてみる
    • 結論を言ってしまうと、同一オリジンポリシーに引っかかっているのでCORSの設定をする必要があります

CORSとは

  • Cross-Origin Resource Sharingの略で、ざっくり言うと違うオリジンからのアクセスを許可する仕組みのこと
    • 同一オリジンポリシー(後述)にという仕組みによって、異なるオリジンのリソースへのアクセスは制限されている
  • オリジンとはURL中のスキーム、ホスト、ポートの組み合わせのこと
    • http://example.comだと
      • スキーム:http
      • ホスト:example.com
      • ポート: 80(省略可能なので明示されているケースは少ない)
  • CORSやオリジンについて詳しくは以下のサイトを参照してください

どのような場面でCORSの設定が必要

  • 現在のブラウザは同一オリジンポリシーが導入されているため、デフォルトでは違うオリジンからのアクセスは遮断されてしまう。

  • WebクライアントとAPIを分ける場合などで、異なるオリジン間の通信を行うためにはCORSの設定をする必要がある。

具体的な設定方法

(i) 単純リクエストの場合

- 許可されているのは以下のメソッドのみです。
  - GET
  - HEAD
  - POST
 - ユーザーエージェントによって自動的に設定されたヘッダー (たとえば  `Connection`、 `User-Agent`、 または Fetch 仕様書で "forbidden header name" として定義されている名前のヘッダー)を除いて、手動で設定できるヘッダーは、 Fetch 仕様書で "CORS-safelisted request-header" として定義されている以下のヘッダーだけです。
   - Accept
   - Accept-Language
   - Content-Language
   - Content-Type (但し、下記の要件を満たすもの)
   - DPR
   - Downlink
   - Save-Data
   - Viewport-Width
   - Width
 - Content-Type ヘッダーで許可されているのは以下の値のみ
   - application/x-www-form-urlencoded
   - multipart/form-data
   - text/plain
- リクエストに使用されるどの XMLHttpRequestUpload にもイベントリスナーが登録されていないこと。これらは正しく XMLHttpRequest.upload を使用してアクセスされます。
- リクエストに ReadableStream オブジェクトが使用されていないこと。

設定すべきこと

  • サーバー側のResponse Headerに以下を追加する。
Access-Control-Allow-Origin: <オリジン名>
  • Access-Control-Allow-Originの値でアクセスを許可するオリジンを指定する。
    値に*を指定するとすべてのアクセスを許可できる。

(ii) 単純リクエストではない場合

  • 実際のリクエストを送る前に安全かを確かめるためにプリフライトリクエストが送られる。

  • プリフライトリクエストは以下の特徴を持っている

    • OPTIONSメソッドを使用
    • 以下の情報がリクエストヘッダに含まれる
      • 実際のリクエストのHTTPメソッド情報
        • Access-Control-Request-Method: <実際のリクエストのHTTPメソッド>
      • 実際のリクエストのヘッダー情報(単純リクエストのヘッダの条件から外れる場合)
        • Access-Control-Request-Headers: <実際のリクエストのカスタムヘッダ>

設定すべきこと

  • サーバー側でOPTIONSメソッドを受け取れるようにする

  • OPTIONSメソッドを受けとったら、以下のヘッダ・値をレスポンスヘッダに追加して返す

    • Access-Control-Allow-Origin: <許可するオリジン名>
    • Access-Control-Allow-Methods: <許可するHTTPメソッド名>
    • Access-Control-Request-Headers: <許可するカスタムヘッダ名>
  • プリフライトリクエストのレスポンスで許可されれば実際のリクエストが送信される。実際のリクエストに対する設定は単純リクエストの場合と同じ。

  • プリフライトリクエスト
    スクリーンショット 2019-03-22 16.58.03.png

  • 実際のリクエスト
    スクリーンショット 2019-03-22 16.58.14.png


※ ユーザー認証情報(CookieやBASIC認証)を送信する場合

設定すべきこと

補足

  • rack-corscorsのようにCORSの設定をサポートするライブラリを利用するのが楽そう

参考URL

37
38
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
37
38

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?