CORS 기반 WebApi Ajax 도메인 간 요청 솔루션 구현-JS 튜토리얼-php.cn

CORS 기반 WebApi Ajax 도메인 간 요청 솔루션 구현

亚连

풀어 주다： 2018-05-22 09:24:04

원래의

1989명이 탐색했습니다.

이 글에서는 주로 CORS 기반의 WebApi Ajax 도메인 간 요청에 대한 솔루션을 소개합니다. 필요한 친구들은 참고하면 됩니다.

Overview

ASP.NET Web API를 사용해 본 사람이라면 누구나 복잡하지 않다는 것을 알 것입니다. . 구성 파일, 간단한 ApiController와 필수 작업이 작동합니다. 그러나 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(교차 원본 리소스 공유) 사양이 있기 때문에 브라우저는 먼저 옵션 스니프를 보내는 동시에 헤더에 원본을 가져와 교차 도메인 요청 권한이 있는지 확인합니다. 서버는 브라우저에 대한 접근 제어 허용 출처 값으로 응답합니다. 일치하면 게시 요청이 공식적으로 전송됩니다. 서버가 프로그램에 크로스 도메인 접근을 허용하더라도 옵션 요청이 지원되지 않으면, 요청이 종료됩니다.

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 파일에 다음 구성 추가

구성 파일 , 이 방법은 간단합니다. 간단한 도메인 간 요청을 처리하는 것입니다.

Ajax 요청 바이너리 스트림 처리(ajax비동기 다운로드 파일)

Django 프레임워크에서 ajax의 post 메소드 사용 방법(그림 및 텍스트 튜토리얼)

응답에 대하여 Ajax에서 백그라운드에서 데이터 전송 문제(코드, 세부 분석 포함)

🎜

위 내용은 CORS 기반 WebApi Ajax 도메인 간 요청 솔루션 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!