CORS (Cross-Origin Resource Sharing) のバックアップ(No.5) - マイクロソフト系技術情報 Wiki

Access to fetch at 'http://localhost:8888/...' from origin 'http://localhost:3000' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

たぶん、下記もコレと同じような話だと思われる。
https://github.com/OpenTouryoProject/FrontendTemplates/issues/8

参考
- JavaScript - CORSでJSからAPIを叩けない｜teratail
  https://teratail.com/questions/144992

↑

使いどころ †

基本的に、CORSは閉じられているので、空ける。

特定サイトのみ許可する制御を加える。
- 対象：特定GUI（Public Client）にのみアクセスを許可する。
- 対象外：不特定多数のClientに公開しているWebAPI

↑

ポイント †

↑

Preflight request †

CORSプロトコルが理解されているかどうかを確認する CORSリクエスト

CORSリクエストが受け入れられるかどうかを事前にチェックを行う。

ある一定条件のリクエストを投げる際には事前に発生する。
（代表的なものに、POST かつ application/json の例がある。）

その場合、サーバが以下を適切にレスポンスするように構成する必要がある。

#	Header	説明
1	Access-Control-Allow-Method	許可されるメソッドの一覧
2	Access-Control-Allow-Headers	許可されるヘッダの一覧
3	Access-Control-Max-Age	プリフライト情報のキャッシュを保持して良い時間

↑

curlでCORS設定を確認 †

以下のように、
curlで任意のOriginヘッダを指定してテストできる。
※ 送信するOriginヘッダは、ブラウザでは捏造不可能。

また、前述のPreflight requestを
テストすることも可能（下記の記事を参照のこと）。

>curl -H "Origin: http://example.com" --verbose http://localhost:8888/api/values/get
*   Trying ::1...
* TCP_NODELAY set
* Connected to localhost (::1) port 8888 (#0)
> GET /api/values/get HTTP/1.1
> Host: localhost:8888
> User-Agent: curl/7.52.1
> Accept: */*
> Origin: http://example.com
>
< HTTP/1.1 200 OK
< Transfer-Encoding: chunked
< Content-Type: application/json; charset=utf-8
< Server: Microsoft-IIS/10.0
< X-Powered-By: ASP.NET
< Date: Thu, 05 Sep 2019 08:54:23 GMT
<
["value1","value2"]* Curl_http_done: called premature == 0
* Connection #0 to host localhost left intact

参考
- How can you debug a CORS request with cURL? - Stack Overflow
  https://stackoverflow.com/questions/12173990/how-can-you-debug-a-cors-request-with-curl
- cURLを使用してCORSリクエストをデバッグするにはどうすればよいですか？ - コードログ
  https://codeday.me/jp/qa/20181207/26208.html

↑

参考 †

CORSでハマったことまとめ - pixiv inside
http://inside.pixiv.net/entry/2014/12/16/181804
ASP.NET Web API 2 CORS サポートについて - miso_soup3 Blog
http://miso-soup3.hateblo.jp/entry/2013/10/08/015152

↑

Qiita †

CORSまとめ
https://qiita.com/tomoyukilabs/items/81698edd5812ff6acb34
CORS関連、これだけ知っとけばまぁ大丈夫
https://qiita.com/rooooomania/items/4d0f6275372f413765de
CORS を分かってないから動くコード書いて理解する
https://qiita.com/mochizukikotaro/items/6b72ad595db8a6b5514f

↑

ASP.NET †

ASP.NET Web API における設定は、下記を参照。

↑

Microsoft Docs †

ASP.NET Web API 2 でクロスオリジン要求の有効化
https://docs.microsoft.com/ja-jp/aspnet/web-api/overview/security/enabling-cross-origin-requests-in-web-api
ASP.NET Core でのクロスオリジン要求 (CORS) を有効にする
https://docs.microsoft.com/ja-jp/aspnet/core/security/cors

↑

Stack Overflow †

c# - How to enable CORS in ASP.NET Core
https://stackoverflow.com/questions/31942037/how-to-enable-cors-in-asp-net-core

c# - How to enable CORS in ASP.net Core WebAPI
https://stackoverflow.com/questions/44379560/how-to-enable-cors-in-asp-net-core-webapi

↑

IE8, 9 †

なお、IE8, 9 ではサポート状況が違うため、
ライブラリのプラグイン内で条件分岐しているもよう。

ドメイン間要求 (XDR) の概要
https://msdn.microsoft.com/ja-jp/library/dd573303.aspx
XDomainRequest? と XMLHttpRequest? level 2 の違い - galife
https://garafu.blogspot.jp/2013/08/xdomainrequest-xmlhttprequest.html
CORS(Cross-Origin Resource Sharing)によるクロスドメイン通信の傾向と対策｜ Developers.IO
http://dev.classmethod.jp/cloud/cors-cross-origin-resource-sharing-cross-domain/

Tags: :プログラミング, :通信技術, :.NET開発, :.NET Core, :ASP.NET, :ASP.NET Web API