クロスオリジンリソースシェアリングを有効にする

クロスオリジンリソースシェアリング（CORS）とは–

クロスオリジンリソースシェアリングは、非表示になっているリソースを表示できるようにするための基本です。 クロスオリジンリソースシェアリング（CORS）は、ドメインの境界を越えた真のオープンアクセスを可能にする仕様です。 CORSを使用すると、Webスクリプトが元のドメイン外のコンテンツとよりオープンに対話できるようになり、Webサービス間の統合が向上します。 クロスオリジンリソースシェアリングを使用すると、Webページ上のフォントのようにブロックされたリソースを、リソースのオリジン元のドメイン外の別のドメインからリクエストできます。

CORSは、ブラウザとサーバーが相互作用して、クロスオリジンリクエストを許可しても安全かどうかを判断する方法を定義します。 純粋に同一生成元のリクエストよりも自由度と機能性が高くなりますが、単にすべてのクロスオリジンリクエストを許可するよりも安全です。

CORSが重要なのはなぜですか？

JavaScriptとWebプログラミングは何年にもわたって飛躍的に成長しましたが、同一生成元ポリシーは依然として残っています。 これにより、JavaScriptがドメインの境界を越えてリクエストを行うのを防ぎ、クロスドメインリクエストを行うためのさまざまなハックを生み出しました。

CORSは、クロスドメインリクエストを実装するためにすべてのブラウザで使用できる標準メカニズムを導入しています。 この仕様では、ブラウザとサーバーが許可されている（および許可されていない）要求について通信できるようにする一連のヘッダーを定義しています。 CORSは、すべてのユーザーにAPIアクセスを提供することで、オープンWebの精神を継続します。

クロスオリジンリソースシェアリングを有効にする–

1.ApacheのCORS

Apacheを使用してヘッダーにCORS認証を追加するには、サーバー構成の<Directory> 、 <Location> <Files> 、または<VirtualHost>セクション（通常は*.confファイルなどの*.confファイルにあります）内に次の行を追加するだけです。 httpd.confまたはapache.conf）、または.htaccessファイル内：

 ヘッダーセットAccess-Control-Allow-Origin"*"

変更が正しいことを確認するために、を使用することを強くお勧めします

apachectl -t

構成の変更にエラーがないか確認します。 これが通過した後、コマンドを実行して変更が適用されていることを確認するために、Apacheをリロードする必要がある場合があります

sudoサービスapache2リロード

また

apachectl -k graceful

ヘッダーを変更するには、mod_headersを使用する必要があります。 Mod_headersはApacheでデフォルトで有効になっていますが、実行によって有効になっていることを確認することをお勧めします

a2enmodヘッダー

注： setではなくaddを使用することもできますが、addはヘッダーを複数回addできるため、setを使用する方が安全である可能性が高いことに注意してください。

2.AppEngineのCORS

Google App EngineのPythonベースのアプリケーションの場合、次のようなself.response.headers.add_header()メソッドを使用できます。

 クラスCORSEnabledHandler（webapp.RequestHandler）：
  def get（self）：
    self.response.headers.add_header（ "Access-Control-Allow-Origin"、 "*"）
    self.response.headers ['Content-Type'] ='text / csv'
    self.response.out.write（self.dump_csv（））

Javaベースのアプリケーションの場合は、 resp.addHeader()を使用します。

 public void doGet（HttpServletRequest req、HttpServletResponse resp）{
  resp.addHeader（ "Access-Control-Allow-Origin"、 "*"）;
  resp.addHeader（ "Content-Type"、 "text / csv"）;
  resp.getWriter（）。append（csvString）;
}

また、Goベースのアプリケーションの場合は、 w.Header().Add()使用します。

 func doGet（w http.ResponseWriter、r * http.Request）{
  w.Header（）。Add（ "Access-Control-Allow-Origin"、 "*"）
  w.Header（）。Add（ "Content-Type"、 "text / csv"）
  fmt.Fprintf（w、csvData）
}

3.ASP.NET上のCORS

IISを構成するためのアクセス権がない場合でも、ソースページに次の行を追加することで、ASP.NETを介してヘッダーを追加できます。

 Response.AppendHeader（ "Access-Control-Allow-Origin"、 "*"）;

ASP.NET Web API

ASP.NET WebAPI2はCORSをサポートしています。

CORSサポートを有効にするには、Microsoft.AspNet.WebApi.CorsNuGetパッケージをプロジェクトに追加します。

このコードを構成に追加します。

 public static void Register（HttpConfiguration config）
{{
    //新しいコード
    config.EnableCors（）;
}

クロスオリジンリクエストを有効にするには、[EnableCors]属性をWebAPIコントローラーまたはコントローラーメソッドに追加します。

 [EnableCors（origins： "http://example.com"、headers： "*"、methods： "*"）]
パブリッククラスTestController：ApiController
{{
    //コントローラメソッドは表示されていません...
}

グローバルに有効化

上記の方法を使用して、各コントローラーに注釈を付けることなく、API全体でCORSを有効にすることもできます。

 public static void Register（HttpConfiguration config）
{{
    var corsAttr = new EnableCorsAttribute（ "http://example.com"、 "*"、 "*"）;
    config.EnableCors（corsAttr）;
}

4. AWSAPIGatewayのCORS

Amazon API Gatewayは、APIGatewayコンソールのシンプルなボタンを介して有効にするCORSのサポートを追加します。 残念ながら、そのボタンには部分的な動作があるため、CORSを200の回答に対してのみ正しく設定し（他のHTTPステータスコードではない）、Jqueryヘッダーのサポートを無視します。 これまでに検討された最善の解決策は、CORSボタンを使用せずに構成を手動で設定することです。

これは、いくつかの手順で実行できます。

1.APIGatewayコンソールにログインします

2. CORSを設定する前に、メソッドで公開する必要のあるすべてのRESTリソースを作成します（CORSを有効にした後に新しいリソース/メソッドを作成する場合は、これらの手順を繰り返す必要があります）

3.リソースを選択します

4. OPTIONSメソッドを追加し、統合タイプとして「モック」を選択します

5.リソースのメソッドごとに

6.応答方法に進みます

7.サポートする必要のあるすべての応答方法（つまり、200、500など）を追加します

8.応答コードごとに、応答ヘッダーをに設定します
X-Requested-With
Access-Control-Allow-Headers
Access-Control-Allow-Origin
Access-Control-Allow-Methods

9. Integration Responseに移動し、作成された応答コードの1つを選択してから、HeaderMappingsを選択します。

10.ヘッダーのデフォルト値を挿入します
例：
X-Requested-With：'*'
Access-Control-Allow-Headers：'Content-Type、X-Amz-Date、Authorization、X-API-Key、x-requested-with'
Access-Control-Allow-Origin：'*'
Access-Control-Allow-Methods：'POST、GET、OPTIONS'
この操作は、新しく作成されたOPTIONSを含め、メソッドごとに繰り返す必要があります。

11.APIをステージにデプロイします

12. http://client.cors-api.appspot.com/clientを使用して、CORSリクエストが正常に有効になっていることを確認します

5.CaddyserverのCORS

Caddyを使用してヘッダーにCORS認証を追加するには、caddyfile内に次の行を追加するだけです。

 cors

これにより、すべてのドメインからすべてのリソースにアクセスできるようになります。

より具体的にすることもできます。つまり、特定のリソースを特定のドメインに許可します。

 cors / foo http://mysite.com http://anothertrustedsite.com

使用できるオプションは他にもたくさんあります。caddyserverのドキュメントに示されているように、完全な例を次に示します。

 cors / {
  オリジンhttp://allowedSite.com
  オリジンhttp://anotherSite.orghttps://anotherSite.org
  メソッドPOST、PUT
  allow_credentials false
  max_age 360​​0
  allowed_headers X-Custom-Header、X-Foobar
  Exposure_headers X-Something-Special、SomethingElse
}

6.CGIスクリプトのCORS

次の行を出力するだけです。

 Access-Control-Allow-Origin：*

.. CGIスクリプトのヘッダーの一部として、たとえばPerlで（CGI.pmを使用）：

 印刷ヘッダー（
  -type =>'text / turtle'、
  -content_location =>'mydata.ttl'、
  -access_control_allow_origin =>'*'、
）;

7.PerlPSGIスクリプトのCORS

モジュールPlack::Middleware :: CrossOriginは、完全なCORSサーバー側の実装を提供します。 任意の場所からの要求を許可するには、これをビルダーに追加するだけです。

 'CrossOrigin'、origins=>'*'を有効にします。

8.PythonのCORS

 「Content-Type：text/turtle」を印刷します
「Content-Location：mydata.ttl」を印刷します
「Access-Control-Allow-Origin：*」を印刷します

9.ExpressJSのCORS

node.jsのExpressJSアプリで、ルートを使用して次の手順を実行します。

 app.use（function（req、res、next）{
  res.header（ "Access-Control-Allow-Origin"、 "*"）;
  res.header（ "Access-Control-Allow-Headers"、 "Origin、X-Requested-With、Content-Type、Accept"）;
  次（）;
}）;

app.get（'/'、function（req、res、next）{
  //このルートのgetを処理します
}）;

app.post（'/'、function（req、res、next）{
 //このルートの投稿を処理します
}）;

10.IIS6のCORS

Microsoft IIS6をCORS対応にするには、次の手順を実行します。

1. オープンインターネットインフォメーションサービス（IIS）マネージャー
2. CORSを有効にするサイトを右クリックして、[プロパティ]に移動します
3. [ HTTPヘッダー]タブに移動します
4. [カスタムHTTPヘッダー]セクションで、[追加]をクリックします
5. ヘッダー名としてAccess-Control-Allow-Originと入力します
6. ヘッダー値として*を入力します
7. [ OK]を2回クリックします

11.IIS7のCORS

Microsoft IIS7の場合、これをアプリケーションまたはサイトのルートにあるweb.configファイルにマージします。

 <？xml version = "1.0" encoding = "utf-8"？>
<構成>
 <system.webServer>
   <httpプロトコル>
     <customHeaders>
       <add name = "Access-Control-Allow-Origin" value = "*" />
     </ customHeaders>
   </httpプロトコル>
 </system.webServer>
</ configuration>

web.configファイルがまだない場合、またはファイルが何であるかわからない場合は、上記のスニペットを含むweb.configという新しいファイルを作成してください。

12.MeteorのCORS

MeteorアプリケーションにCORS認証を追加するには、webappパッケージのWebApp.connectHandlersを使用してHTTPヘッダーをカスタマイズします。

 //着信HTTPリクエストをリッスンします。サーバーでのみ使用できます
WebApp.rawConnectHandlers.use（function（req、res、next）{
  res.setHeader（ "Access-Control-Allow-Origin"、 "*"）;
  next（）;を返す
}）;

オプションのpath引数を使用して、指定された文字列に一致するパスのハンドラーのみを呼び出します。

 //着信HTTPリクエストをリッスンします。サーバーでのみ使用できます
WebApp.rawConnectHandlers.use（ "/ public"、function（req、res、next）{
  res.setHeader（ "Access-Control-Allow-Origin"、 "*"）;
  next（）;を返す
}）;

13.NginxのCORS

次のNginx構成は、プリフライトリクエストをサポートするCORSを有効にします。

 ＃
＃nginxのワイドオープンCORS設定
＃
位置 / {
     if（$ request_method ='OPTIONS'）{
        add_header'Access-Control-Allow-Origin''*';
        add_header'Access-Control-Allow-Methods''GET、POST、OPTIONS';
        ＃
        ＃カスタムヘッダーとさまざまなブラウザのヘッダーは問題ないはずですが、そうではありません
        ＃
        add_header'Access-Control-Allow-Headers''DNT、X-CustomHeader、Keep-Alive、User-Agent、X-Requested-With、If-Modified-Since、Cache-Control、Content-Type';
        ＃
        ＃この飛行前情報は20日間有効であることをクライアントに伝えます
        ＃
        add_header'Access-Control-Max-Age' 1728000;
        add_header'Content-Type''text / plain charset = UTF-8';
        add_header'Content-Length' 0;
        リターン204;
     }
     if（$ request_method ='POST'）{
        add_header'Access-Control-Allow-Origin''*';
        add_header'Access-Control-Allow-Methods''GET、POST、OPTIONS';
        add_header'Access-Control-Allow-Headers''DNT、X-CustomHeader、Keep-Alive、User-Agent、X-Requested-With、If-Modified-Since、Cache-Control、Content-Type';
     }
     if（$ request_method ='GET'）{
        add_header'Access-Control-Allow-Origin''*';
        add_header'Access-Control-Allow-Methods''GET、POST、OPTIONS';
        add_header'Access-Control-Allow-Headers''DNT、X-CustomHeader、Keep-Alive、User-Agent、X-Requested-With、If-Modified-Since、Cache-Control、Content-Type';
     }
}

14.PerlPSGIスクリプトのCORS

モジュールPlack::Middleware :: CrossOriginは、完全なCORSサーバー側の実装を提供します。 任意の場所からの要求を許可するには、これをビルダーに追加するだけです。

 'CrossOrigin'、origins=>'*'を有効にします。

このモジュールは、DebianおよびUbuntuでもlibplack-middleware-crossorigin-perlとして利用できます。

15.PHPのCORS

Apacheを設定するためのアクセス権がない場合でも、PHPスクリプトからヘッダーを送信できます。 これは、PHPスクリプトに以下を追加する場合です。

 <？php
 header（ "Access-Control-Allow-Origin：*"）;

注： PHPヘッダー関数のすべての使用法と同様に、これはサーバーから出力が送信される前に行う必要があります。

16.ColdFusionのCORS

Webサーバーを構成するためのアクセス権がない場合でも、Coldfusionスクリプトからヘッダーを送信できます。 これは、Coldfusionスクリプトに以下を追加する場合です。

タグベースのファイル

<cfheader name = "Access-Control-Allow-Origin" value = "*">

スクリプトベースのファイル

var response = getPageContext（）。getResponse（）;
response.setHeader（ "Access-Control-Allow-Origin"、 "*"）;

注：これは、サーバーから出力を送信する前に設定する必要があります。

17.TomcatのCORS

Apache Tomcatには、CORSのサポートが含まれています（Tomcatバージョン7.0.41以降）。

最小限のCORS構成を示すドキュメントの例を次に示します。

 <フィルター>
  <filter-name> CorsFilter </ filter-name>
  <filter-class> org.apache.catalina.filters.CorsFilter </ filter-class>
</ filter>
<フィルターマッピング>
  <filter-name> CorsFilter </ filter-name>
  <url-pattern> / * </ url-pattern>
</ filter-mapping>

18.VirtuosoのCORS

これらのインスタンス/サーバーレベルの設定には、OpenLink Virtuoso Open Source（VOS）6.1.3以降、またはVirtuoso CommercialEdition06.02.3129が必要です。

1. Virtuoso Conductorで、[ Webアプリケーションサーバー] →[仮想ドメインとディレクトリ]に移動します。
2. デフォルトのインターフェイスストアを展開します。
3. [新しいディレクトリ]をクリックします。
4. 目的の仮想ディレクトリタイプを指定するか、テンプレートとして使用する既存の仮想ディレクトリを選択します。
5. [次へ]をクリックします。
6. ディレクトリパスの値を指定します。
7. CORSオプションを設定します。
   • クロスオリジンリソースシェアリング–単一のワイルドカードアスタリスク、つまり* 、またはhttp://example.com:8080やhttp://foo.example.comなどのオリジンが含まれます。 リソースがワイルドカードを使用するか、スクリプトの出所をリストしている場合、スクリプトはリソースを取得することを許可されます。 この例では、次の単一のURIを入力します：http： http://demo.openlinksw.com
   • [意図しないCORSを拒否する]チェックボックス–チェックボックスをオンにしてアプリケーションがヘッダーを上書きしない場合、一致しないオリジンは空の応答を送信して拒否されます。
8. [変更を保存]をクリックします。

古いバージョンのVirtuosoの場合、以下のWebアプリケーションレベルの手順のいずれかを使用できます。 Virtuosoベースのアプリケーションは、よく知られているHTTP関数http_request_header（）およびhttp_header（）を介してCORSチェックを実装できます。次に例を示します。

 <？vsp
IF（http_request_header（lines、'Origin'、NULL）='http://host.org'）
{{
  http_header（'Access-Control-Allow-Origin：http：//host.org \ r \ n'）;
}
そうしないと
{{
  戻る;
}
-ここに追加のコード---
？>

19.WCFのCORS

WCFサービスの場合、新しい動作を開発し、それをエンドポイント構成に含める必要があります。

メッセージインスペクターの作成

パブリッククラスCustomHeaderMessageInspector：IDispatchMessageInspector
            {{
                辞書<文字列、文字列> requiredHeaders;
                public CustomHeaderMessageInspector（Dictionary <string、string>ヘッダー）
                {{
                    requiredHeaders=ヘッダー?? 新しい辞書<文字列、文字列>（）;
                }

                パブリックオブジェクトAfterReceiveRequest（ref System.ServiceModel.Channels.Message request、System.ServiceModel.IClientChannel channel、System.ServiceModel.InstanceContext instanceContext）
                {{
                    nullを返します。
                }

                public void BeforeSendReply（ref System.ServiceModel.Channels.Message reply、objectcorrelationState）
                {{
                    var httpHeader = reply.Properties ["httpResponse"] as HttpResponseMessageProperty;
                    foreach（requiredHeadersのvarアイテム）
                    {{
                        httpHeader.Headers.Add（item.Key、item.Value）;
                    }           
                }
            }

エンドポイント動作を作成し、メッセージインスペクターを使用してヘッダーを追加します

パブリッククラスEnableCrossOriginResourceSharingBehavior：BehaviorExtensionElement、IEndpointBehavior
            {{
                public void AddBindingParameters（ServiceEndpoint endpoint、System.ServiceModel.Channels.BindingParameterCollection bindingParameters）
                {{
           
                }

                public void ApplyClientBehavior（ServiceEndpoint endpoint、System.ServiceModel.Dispatcher.ClientRuntime clientRuntime）
                {{
            
                }

                public void ApplyDispatchBehavior（ServiceEndpoint endpoint、System.ServiceModel.Dispatcher.EndpointDispatcher endpointDispatcher）
                {{
                    var requiredHeaders = new Dictionary <string、string>（）;

                    requiredHeaders.Add（ "Access-Control-Allow-Origin"、 "*"）;
                    requiredHeaders.Add（ "Access-Control-Request-Method"、 "POST、GET、PUT、DELETE、OPTIONS"）;
                    requiredHeaders.Add（ "Access-Control-Allow-Headers"、 "X-Requested-With、Content-Type"）;

                    endpointDispatcher.DispatchRuntime.MessageInspectors.Add（new CustomHeaderMessageInspector（requiredHeaders））;
                }

                public void Validate（ServiceEndpointエンドポイント）
                {{
            
                }

                パブリックオーバーライドタイプBehaviorType
                {{
                    get {return typeof（EnableCrossOriginResourceSharingBehavior）; }
                }

                保護されたオーバーライドオブジェクトCreateBehavior（）
                {{
                    新しいEnableCrossOriginResourceSharingBehavior（）;を返します。
                }
            }

web.configに新しい動作を登録します

<拡張機能>
              <behaviorExtensions>        
                <add name = "crossOriginResourceSharingBehavior" type = "Services.Behaviours.EnableCrossOriginResourceSharingBehavior、Services、Version = 1.0.0.0、Culture = neutral" />        
              </ BehaviorExtensions>      
            </extensions>

エンドポイント動作構成に新しい動作を追加する

<endpointBehaviors>      
            <behavior name = "jsonBehavior">
                <webHttp />
                <crossOriginResourceSharingBehavior />
            </動作>
            </ endpointBehaviors>

エンドポイントを構成する

<endpoint address = "api" binding = "webHttpBinding" BehaviorConfiguration = "jsonBehavior" Contract = "Service.IServiceContract" />

CORSをサポートするAPI

• Amazon S3
• DBpediaスポットライト
• Dropbox API
• FacebookグラフAPI
• Flickr API
• FourSquare API
• Google API
• Google Cloud Storage
• GitHub v3 API
• MediaWiki API
• prefix.cc
• PublishMyData
• と同じ
• SoundCloud API
• Spotify Lookup API
• サンライトコングレスAPI
• URIBurner
• YouTube API（ブログ投稿）
• doctape API

CORSを実装するためのライブラリ

• CORSフィルター、JavaWebアプリケーション用
• cors-python、PythonWebアプリ用
• GoogleAppEngineの静的コンテンツでCORSを有効にします。
• RDF::LinkedDataバージョン0.16以降
• cors-filter：eBaySoftwareFoundationによるWebコンテナー用のサーバー側CORSのJavaサーブレットフィルター実装
• add-cors-to-couchdb：PouchDBなどのクライアントライブラリで使用するために、CouchDBにCORSサポートを追加するCLI。

これを読んでくれてありがとう 役職。 このチュートリアルが、オリジン間リソース共有を有効にするのに役立つことを願っています。

以下にコメントとコメントをお願いします。