Implementing WebApi Ajax cross-domain request solution based on CORS

This article mainly introduces the solution to WebApi Ajax cross-domain request based on CORS. Friends in need can refer to the following

Overview

ASP.NET Web API is easy to use. Everyone who has used it knows that there is no complicated configuration file, a simple ApiController plus the required Action can work. However, when using APIs, you will always encounter the problem of cross-domain requests. Especially today with the proliferation of various APPs, cross-domain requests for APIs are unavoidable.

By default, in order to prevent CSRF cross-site forgery attacks (or JavaScript's Same-Origin Policy), a web page will be restricted when it obtains data from another domain. There are some ways to break through this limitation, which is the well-known JSONP. Of course, this is just one of many solutions. Since JSONP only supports GET requests, it can no longer meet the needs of today's complex businesses. CORS (Cross Origin Resource Sharing https://www.w3.org/wiki/CORS) cross-domain resource sharing is a new header specification that allows the server to relax cross-domain restrictions and switch restrictions based on headers. Or don't restrict cross-domain requests. The important thing is that it supports all http request methods.

Problem

XMLHttpRequest Cross-domain POST or GET request, the request method will automatically become an OPTIONS problem.

Due to the existence of the CORS (cross origin resource share) specification, the browser will first send an options sniff, and at the same time bring the origin in the header to determine whether there is cross-domain request permission. The server responds with the value of access control allow origin. , for the browser to match the origin. If it matches, the post request will be officially sent. Even if the server allows the program to access cross-domain, if the options request is not supported, the request will die.

Reason

For the sake of security, the browser will use the transparent server verification mechanism of Preflighted Request to support developers to use custom headers, GET Or methods other than POST, and different types of subject content, that is, an options request will be sent first,
Ask the server whether the request will be correct (allowed) to ensure that the request is safe to send.

The situations where OPTIONS appear are generally:

1. Non-GET, POST request

2. The content-type of POST request is not the conventional three: application/x- www-form-urlencoded (form submitted using HTTP POST method), multipart/form-data (same as above, but mainly used when a file is uploaded when submitting a form), text/plain (plain text)

3. The payload of the POST request is text/html

4. Set custom headers

The OPTIONS request header will include the following headers: Origin, Access-Control-Request-Method , Access-Control-Request-Headers, after sending this request, the server can set the following headers to communicate with the browser to determine whether to allow this request.
Access-Control-Allow-Origin, Access-Control-Allow-Method, Access-Control-Allow-Headers

Solution

This method is powerful and can solve complex cross-domain requests of ASP.NET Web API, carrying complex header information, body content and authorization verification information

Method 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);
 }
}

How to use, add

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());
}

Method 2

Add the following configuration to the configuration file in the Global.asax file. This method is simple and can handle simple cross-domain requests

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

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Ajax request binary stream for processing (ajaxAsynchronous download file)

Django framework How to use the post method of ajax (graphic tutorial)

About the problem of passing data in the background through response in Ajax (including code, detailed analysis)

The above is the detailed content of Implementing WebApi Ajax cross-domain request solution based on CORS. For more information, please follow other related articles on the PHP Chinese website!