「[[マイクロソフト系技術情報 Wiki>http://techinfoofmicrosofttech.osscons.jp/]]」は、「[[Open棟梁Project>https://github.com/OpenTouryoProject/]]」,「[[OSSコンソーシアム .NET開発基盤部会>https://www.osscons.jp/dotNetDevelopmentInfrastructure/]]」によって運営されています。

-[[戻る>クロス ドメイン接続]]

* 目次 [#cd946db6]
#contents

*概要 [#oe684c04]
クロス ドメイン接続専用に用意された技術。

-ブラウザとサーバ間で、約束された Request / Response を使って、~
そのドメインからのクロス ドメインの呼び出しを許可するか確認をおこなう。

-サーバが許可していれば XMLHttpRequest を使用したクロス ドメインの呼び出しをおこなう。

このように、ブラウザ・サーバの双方が CORS に対応している必要がある(ここが鬼門)。

*詳細 [#o1070ea8]

**使い方 [#bfd484fe]

***サーバーでポリシ設定 [#cd9a5772]
-フレームワーク次第だが、基本的に、閉じられているので、空ける。

-[[ブラウザ側で問題>#rfacb72b]]が出るので、Access-Control-Allowヘッダを返すように設定する。

-参考
--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

***ブラウザのサポートを確認 [#rfacb72b]
-jQueryなど、ブラウザ上のライブラリは基本にCORSをサポートしている。

-ブラウザによってサポート状況が異なり動作が変わる。

--例えば、fetchで以下の様なエラーが出る。
 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

***使いどころ [#qf9a9950]
-基本的に、閉じられているので、空ける。

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

**curlでCORS設定を確認 [#ee1bd8d8]
-以下のように、curlで任意のOriginヘッダを指定してテストできる。
-※ Originヘッダは、ブラウザでは捏造不可能。
**ポイント [#q20c0e7c]

***Preflight request [#p9ff6462]
-リクエストが受け入れられるかどうかを事前にチェックを行う。

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

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

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

***curlでCORS設定を確認 [#ee1bd8d8]
-以下のように、curlで任意のOriginヘッダを指定してテストできる。~
※ 送信するOriginヘッダは、ブラウザでは捏造不可能。

-また、前述の[[Preflight request>#p9ff6462]]をテストすることも可能。

 >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

*参考 [#ra2c5876]
-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 [#iffd4d51]
-CORSまとめ~
https://qiita.com/tomoyukilabs/items/81698edd5812ff6acb34
-CORS関連、これだけ知っとけばまぁ大丈夫~
https://qiita.com/rooooomania/items/4d0f6275372f413765de
-CORS を分かってないから動くコード書いて理解する~
https://qiita.com/mochizukikotaro/items/6b72ad595db8a6b5514f

**IE8, 9 [#u0bb05e3]
なお、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]]


トップ   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS