CORS を使用して WebApi Ajax クロスドメイン リクエストを実装する方法

今回は CORS を使用して WebApi Ajax クロスドメイン リクエストを実装する方法について説明します。 CORS を使用して WebApi Ajax クロスドメイン リクエストを実装する際に注意すべき点は何ですか? 以下は実践的なものです。ケース、見てみましょう。

概要 ASP.NET Web API を使用したことがある人なら誰でも、複雑な

構成ファイル

はなく、単純な ApiController と必要なアクションだけで機能することを知っています。ただし、API を使用する場合、クロスドメイン リクエストの問題が常に発生します。特に今日ではさまざまな APP が急増しており、API に対するクロスドメイン リクエストは避けられません。 デフォルトでは、CSRF クロスサイト フォージェリ攻撃 (または

javascript

の同一オリジン ポリシー) を防ぐために、Web ページが別のドメインからデータを取得する場合は制限されます。この制限を突破する方法はいくつかありますが、これはよく知られた JSONP です。もちろん、これは多くの解決策の 1 つにすぎません。JSONP は GET リクエストのみをサポートしているため、今日の複雑なビジネスのニーズを満たすことはできません。 CORS (Cross Origin Resource Sharing https://www.w3.org/wiki/CORS) クロスドメイン リソース共有は、サーバーがクロスドメイン制限を緩和し、ヘッダーに基づいて制限を切り替えることを可能にする新しいヘッダー仕様です。クロスドメインリクエストを制限しません。重要なことは、すべての http リクエスト メソッドをサポートしていることです。

QuestionXMLHttpRequest クロスドメイン POST または GET リクエストの場合、リクエスト メソッドは自動的に OPTIONS の質問になります。

CORS (クロスオリジンリソースシェア) 仕様の存在により、ブラウザは最初にオプションスニフを送信し、同時にヘッダーにオリジンを含めて、クロスドメインリクエストの許可があるかどうかを判断します。サーバーは、ブラウザーのアクセス制御許可オリジンの値で応答します。オリジンと一致する場合、サーバーがプログラムにクロスドメインへのアクセスを許可しない場合でも、

投稿リクエスト

が正式に送信されます。サポートされている場合、リクエストは無効になります。

理由セキュリティ上の理由から、ブラウザはプリフライトリクエストの透過的なサーバー検証メカニズムを使用して、カスタムヘッダー、GET または POST 以外のメソッド、およびさまざまなタイプのテーマコンテンツを使用する開発者をサポートします。つまり、オプションリクエストはを最初に送信し、

リクエストを正しく送信する (許可する) かどうかをサーバーに問い合わせて、リクエストを送信しても安全であることを確認します。

OPTIONS が表示される状況は一般的に次のとおりです:

1. 非 GET、POST リクエスト

2. POST リクエストのコンテンツ タイプは、従来の 3 つではありません: application/x-www-form-urlencoded (HTTP を使用して送信) POST メソッド form)、multipart/form-data (上記と同じですが、主にフォームの送信に

ファイルのアップロード

が伴う場合に使用されます)、text/plain (プレーン テキスト) 3 POST リクエストのペイロードは text/ です。 html

4、カスタム ヘッダーの設定

OPTIONS リクエスト ヘッダーには、Origin、Access-Control-Request-Method、Access-Control-Request-Headers のヘッダーが含まれます。このリクエストを送信した後、サーバーは次のヘッダーとヘッダーを設定できます。ブラウズはサーバーと通信して、リクエストを許可するかどうかを決定します。

Access-Control-Allow-Origin、Access-Control-Allow-Method、Access-Control-Allow-Headers

ソリューションこのメソッドは強力で、ASP.NET Web の複雑なクロスドメイン要求を解決できます。複雑なヘッダー情報、本文コンテンツ、および認証検証情報を運ぶ API

方法 1

public class CrosHandler:DelegatingHandler
{
 private const string Origin = "Origin";
 private const string AccessControlRequestMethod = "Access-Control-Request-Method";
 private const string AccessControlRequestHeaders = "Access-Control-Request-Headers";
 private const string AccessControlAllowOrign = "Access-Control-Allow-Origin";
 private const string AccessControlAllowMethods = "Access-Control-Allow-Methods";
 private const string AccessControlAllowHeaders = "Access-Control-Allow-Headers";
 private const string AccessControlAllowCredentials = "Access-Control-Allow-Credentials";
 protected override Task<HttpResponseMessage> SendAsync(HttpRequestMessage request, CancellationToken cancellationToken)
 {
  bool isCrosRequest = request.Headers.Contains(Origin);
  bool isPrefilightRequest = request.Method == HttpMethod.Options;
  if (isCrosRequest)
  {
   Task<HttpResponseMessage> taskResult = null;
   if (isPrefilightRequest)
   {
    taskResult = Task.Factory.StartNew<HttpResponseMessage>(() =>
    {
     HttpResponseMessage response = new HttpResponseMessage(System.Net.HttpStatusCode.OK);
     response.Headers.Add(AccessControlAllowOrign,
      request.Headers.GetValues(Origin).FirstOrDefault());
     string method = request.Headers.GetValues(AccessControlRequestMethod).FirstOrDefault();
     if (method != null)
     {
      response.Headers.Add(AccessControlAllowMethods, method);
     }
     string headers = string.Join(", ", request.Headers.GetValues(AccessControlRequestHeaders));
     if (!string.IsNullOrWhiteSpace(headers))
     {
      response.Headers.Add(AccessControlAllowHeaders, headers);
     }
     response.Headers.Add(AccessControlAllowCredentials, "true");
     return response;
    }, cancellationToken);
   }
   else
   {
    taskResult = base.SendAsync(request, cancellationToken).ContinueWith<HttpResponseMessage>(t =>
    {
     var response = t.Result;
     response.Headers.Add(AccessControlAllowOrign,
      request.Headers.GetValues(Origin).FirstOrDefault());
     response.Headers.Add(AccessControlAllowCredentials, "true");
     return response;
    });
   }
   return taskResult;
  }
  return base.SendAsync(request, cancellationToken);
 }
}

使用方法、

protected void Application_Start()
{
 IOCConfig.RegisterAll();
 AreaRegistration.RegisterAllAreas();
 WebApiConfig.Register(GlobalConfiguration.Configuration);
 FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
 RouteConfig.RegisterRoutes(RouteTable.Routes);
 BundleConfig.RegisterBundles(BundleTable.Bundles);
 GlobalConfiguration.Configuration.MessageHandlers.Add(new CrosHandler());
}

を追加

方法 2

Global.asax ファイルに次の設定を追加します

設定ファイル、この方法は単純で、単純なクロスドメインリクエストに対処するためのものです

<system.webServer>
 <httpProtocol>
  <customHeaders>
  <add name="Access-Control-Allow-Origin" value="*" />
  <add name="Access-Control-Allow-Headers" value="Content-Type" />
  <add name="Access-Control-Allow-Methods" value="GET, POST,OPTIONS" />
  </customHeaders>
 </httpProtocol>
<system.webServer>

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、 の他の関連記事に注目してください。 PHPの中国語サイトです！

推奨読書:

エンティティクラスと XML ファイルを変換する方法

Ajax を使用して Razor ページを部分的に更新する方法の詳細な説明

🎜

以上がCORS を使用して WebApi Ajax クロスドメイン リクエストを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。