집 >웹 프론트엔드 >JS 튜토리얼 >CORS를 사용하여 WebApi Ajax 도메인 간 요청을 구현하는 방법

CORS를 사용하여 WebApi Ajax 도메인 간 요청을 구현하는 방법

php中世界最好的语言원래의: 2018-03-31 10:34:302262검색

이번에는 CORS를 사용하여 WebApi Ajax 크로스 도메인 요청을 구현하는 방법을 알려드리겠습니다. CORS를 사용하여 WebApi Ajax 크로스 도메인 요청을 구현할 때 주의해야 할 주의사항은 무엇입니까? 사례를 살펴보겠습니다.

개요

ASP.NET Web API를 사용해 본 사람이라면 누구나 복잡한 구성 파일이 없고 간단한 ApiController와 필수 Action만 있으면 작동할 수 있다는 것을 알고 있습니다. 그러나 API를 사용하면 항상 도메인 간 요청 문제에 직면하게 됩니다. 특히 오늘날 다양한 앱이 확산되면서 API에 대한 도메인 간 요청은 불가피합니다.

기본적으로 CSRF 교차 사이트 위조 공격(또는 javascript의 동일 출처 정책)을 방지하기 위해 웹 페이지가 다른 도메인에서 데이터를 얻을 때 제한됩니다. 이러한 한계를 극복할 수 있는 몇 가지 방법이 있는데, 이는 잘 알려진 JSONP입니다. 물론 이는 많은 솔루션 중 하나일 뿐입니다. JSONP는 GET 요청만 지원하므로 더 이상 오늘날의 복잡한 비즈니스 요구 사항을 충족할 수 없습니다. CORS(Cross Origin Resource Sharing https://www.w3.org/wiki/CORS) 도메인 간 리소스 공유는 서버가 도메인 간 제한을 완화하고 헤더를 기반으로 제한을 전환할 수 있도록 하는 새로운 헤더 사양입니다. 도메인 간 요청을 제한하지 마십시오. 중요한 것은 모든 http 요청 방법을 지원한다는 것입니다.

Question

XMLHttpRequest 도메인 간 POST 또는 GET 요청의 경우 요청 방법은 자동으로 OPTIONS 질문이 됩니다.

CORS(교차 원본 리소스 공유) 사양이 있기 때문에 브라우저는 먼저 옵션 스니프를 보내는 동시에 헤더에 원본을 가져와 교차 도메인 요청 권한이 있는지 확인합니다. 서버는 브라우저에 대한 액세스 제어 허용 원본 값으로 응답합니다. 일치하는 경우 서버가 프로그램의 도메인 간 액세스를 허용하더라도 옵션 요청이 그렇지 않은 경우 post 요청이 공식적으로 전송됩니다. 지원되면 요청이 종료됩니다.

Reason

보안상의 이유로 브라우저는 Preflighted Request의 투명한 서버 확인 메커니즘을 사용하여 사용자 정의 헤더, GET 또는 POST 이외의 방법 및 다양한 유형의 테마 콘텐츠를 사용하는 개발자를 지원합니다. 즉, 옵션 요청은
서버에 요청을 올바르게(허용)할지 물어서 요청을 보내는 것이 안전한지 확인하세요.

OPTIONS가 나타나는 상황은 일반적으로 다음과 같습니다.

1. Non-GET, POST 요청

2. POST 요청의 콘텐츠 유형은 일반적인 세 가지: application/x- www-form-urlencoded(HTTP를 사용하여 제출됨)가 아닙니다. POST 메소드 양식), 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

Solution

이 방법은 강력하며 ASP.NET 웹의 복잡한 도메인 간 요청을 해결할 수 있습니다. 복잡한 헤더 정보, 본문 내용 및 권한 확인 정보를 전달하는 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 중국어 웹사이트!