CORS 기반 WebApi Ajax 크로스 도 메 인 요청 해결 방법

개술
ASP.NET Web API 의 사용 하기 좋 은 것 은 복잡 한 프로필 이 없고 간단 한 Apicontroller 에 필요 한 Action 을 더 하면 작 동 할 수 있다 는 것 을 잘 알 고 있 습 니 다.그러나 API 를 사용 할 때 항상 크로스 도 메 인 요청 문제 가 발생 하 는데 특히 각종 앱 이 만개 한 오늘날 API 의 크로스 도 메 인 요청 은 피 할 수 없다.
기본적으로 CSRF 크로스 오 버 사이트 의 위조 공격(또는 자바 script 의 동원 정책(Same-Origin Policy)을 방지 하기 위해 한 웹 페이지 가 다른 도 메 인 에서 데 이 터 를 가 져 올 때 제한 을 받 습 니 다.이 규 제 를 돌파 할 수 있 는 방법 이 있다.바로 여러분 이 잘 아 는 JSONP 입 니 다.물론 이것 은 여러 가지 해결 방법 중 하나 일 뿐 입 니 다.JSONP 는 GET 의 요구 만 지원 하기 때문에 현재 의 복잡 한 업무 에서 수 요 를 만족 시 킬 수 없습니다.한편,CORS(Cross Origin Resource Sharinghttps://www.w3.org/wiki/CORS)크로스 도 메 인 자원 공 유 는 새로운 header 규범 으로 서버 측 이 크로스 도 메 인 제한 을 풀 수 있 고 header 에 따라 제한 을 전환 하거나 크로스 도 메 인 요청 을 제한 하지 않 을 수 있 습 니 다.중요 한 것 은 모든 http 요청 방식 을 지원 하 는 것 입 니 다.
문제.
XML HttpRequest 크로스 도 메 인 POST 또는 GET 요청,요청 방식 은 자동 으로 OPTIONS 의 문제 가 됩 니 다.
CORS(cross origin resource share)규범 이 존재 하기 때문에 브 라 우 저 는 먼저 options 탐지 기 를 보 냅 니 다.또한 header 는 origin 을 가지 고 크로스 도 메 인 요청 권한 이 있 는 지 판단 합 니 다.서버 는 access control allow origin 의 값 에 응답 하여 브 라 우 저 와 origin 이 일치 하도록 합 니 다.만약 에 일치 하면 post 요청 을 정식으로 보 냅 니 다.서버 가 프로그램 크로스 도 메 인 접근 을 허용 하 더 라 도.options 요청 이 지원 되 지 않 으 면 요청 도 죽 습 니 다.
원인.
브 라 우 저 는 보안 을 위해 Preflighted Request 의 투명 서버 인증 체 제 를 개발 자 들 이 사용자 정의 머리,GET 또는 POST 이외 의 방법 과 다양한 유형의 테마 내용 을 사용 할 수 있 도록 지원 합 니 다.즉,options 요청 을 먼저 보 냅 니 다.
서버 에 요청 이 올 바 르 고(허용)요청 이 안전 한 지 물 어보 세 요.
OPTIONS 가 나타 나 는 경 우 는 일반적으로:
1.비 GET,POST 요청
2.POST 가 요청 한 content-type 은 일반적인 세 가지 가 아 닙 니 다.application/x-www-form-urlencoded(HTTP 의 POST 방법 으로 제출 한 폼),multipart/form-data(위 와 같 지만 폼 을 제출 할 때 파일 을 업로드 하 는 장소 에 사 용 됩 니 다),text/plain(텍스트)
3.POST 가 요청 한 payload 는 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);
 }
}

사용 방법,Global.aax 파일 에 추가

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
프로필 에 다음 설정 을 추가 합 니 다.이 방법 은 간단 합 니 다.간단 한 크로스 요청 에 대응 합 니 다.

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

총결산
위 에서 말 한 것 은 편집장 이 여러분 에 게 소개 한 CORS 를 바탕 으로 WebApi Ajax 크로스 도 메 인 요청 해결 방법 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 저 에 게 메 시 지 를 남 겨 주세요.편집장 은 신속하게 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!