program tip

Web API 2에서 CORS 활성화

radiobox 2021. 1. 11. 07:56
반응형

Web API 2에서 CORS 활성화


다른 포트에서 실행되는 클라이언트와 서버가 있습니다. 서버에서 Web API 2 (v5.0.0-rc1)를 실행 중 입니다.

Microsoft ASP.NET Web API Cross-Origin 지원 패키지 설치를 시도 하고 WebApiConfig.cs. 그것은 나에게 EnableCors()기능을 제공 하므로 패키지가 올바르게 설치되었습니다.

여기 Register()에서 기능을 볼 수 있습니다 WebApiConfig.cs.

public static void Register(HttpConfiguration config)
{
    config.MapHttpAttributeRoutes();

    var cors = new EnableCorsAttribute("*", "*", "*");
    config.EnableCors(cors);
}

GET요청이 잘 작동합니다. 그러나을 보낼 때 POST다음을 얻습니다.

OPTIONS http://localhost:19357/api/v1/rooms? 404 (Not Found) angular.js:10159
OPTIONS http://localhost:19357/api/v1/rooms? Origin http://localhost:8000 is not allowed by Access-Control-Allow-Origin. angular.js:10159
XMLHttpRequest cannot load http://localhost:19357/api/v1/rooms. Origin http://localhost:8000 is not allowed by Access-Control-Allow-Origin.

Fiddler에 따르면 OPTIONS요청 만 보냅니다 . POST나중에 발행하지 않습니다 .

그래서 나는 config.EnableCors(cors);에서 WebApiConfig.cs아무것도하지 않고 있다고 생각하는데, 이로 인해 서버가 클라이언트 / 브라우저가 POST요청 을 보내는 것을 거부하게됩니다 .

이 문제를 해결하는 방법을 알고 있습니까?

수정 05.09.13 5.0.0-rtm-130905에서 수정되었습니다.


CORS는 Microsoft.AspNet.WebApi.Cors버전 5.2.2 에서 완벽하게 작동합니다 . 다음 단계는 CORS를 매력처럼 구성했습니다.

  1. Install-Package Microsoft.AspNet.WebApi.Cors -Version "5.2.2" // 패키지 관리자 콘솔에서 실행
  2. Global.asax에서 다음 줄을 추가합니다. 모든 MVC 경로 등록 전

    GlobalConfiguration.Configure(WebApiConfig.Register);
    
  3. 에서 WebApiConfig등록 방법, 다음과 같은 코드가 있습니다 :

    public static void Register(HttpConfiguration config)
    {
        config.EnableCors();
        config.MapHttpAttributeRoutes();
    }
    

web.config에서 다음 핸들러는 파이프 라인의 첫 번째 핸들러 여야합니다.

<add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />

에서 파생 된 컨트롤러에서 다음을 ApiController추가합니다 EnableCorsAttribute.

[EnableCors(origins: "*", headers: "*", methods: "*")] // tune to your needs
[RoutePrefix("")]
public class MyController : ApiController

그것은 당신을 멋지게 설정해야합니다!


패키지를 설치할 필요가 없었습니다. WebAPI 프로젝트의 web.config에서 간단한 변경만으로도 잘 작동합니다.

<system.webServer>
    <httpProtocol>
        <customHeaders>
            <add name="Access-Control-Allow-Origin" value="*" />
        </customHeaders>
    </httpProtocol>
</system.webServer>

크레딧은 다음과 같습니다 : 로켓 과학자가 아닌 ASP.NET WebAPI에서 CORS 사용


속성 라우팅 으로이 문제가장 확실하게 해결 하고 있습니다. 이 문제5.0.0-rtm-130905 에서 수정 되었습니다. 그러나 여전히 수정이 가장 확실한 야간 빌드시험해 볼 수 있습니다 .

당신의 NuGet 패키지 소스에 나이틀리를 추가하려면 사이트로 이동 Tools -> Library Package Manager -> Package Manager Settings및 아래에 다음 URL을 추가 Package Sources: http://myget.org/F/aspnetwebstacknightly


HTTPS를 통해 WebAPI에 액세스하고 있는지 확인하십시오.

또한 WebApi.config에서 cors를 활성화했습니다.

var cors = new EnableCorsAttribute("*", "*", "*");
config.EnableCors(cors);

하지만 내 CORS 요청은 HTTPS URL을 사용할 때까지 작동하지 않았습니다.


나중에 참조 할 수 있도록 늦은 답변 나를 위해 일한 것은 nuget으로 활성화 한 다음 web.config에 사용자 정의 헤더를 추가하는 것입니다.


참조를 [EnableCors()]위해이 접근 방식을 사용하면 DelegatingHandler. 제 경우 Authorization에는 라우팅이 호출되기 전에 요청 헤더를 확인 하고 적절하게 처리했습니다. 즉, 요청이 파이프 라인에서 더 일찍 처리되어 [EnableCors()]효과가 없었습니다.

결국 예제 발견 CrossDomainHandler클래스 (에 신용 shaunxu 에 대한 요점 ) 파이프 라인에 나를 위해 CORS를 처리하고 파이프 라인에 또 다른 메시지 처리기를 추가 한 간단하다 사용.

public class CrossDomainHandler : DelegatingHandler
    {
        const string Origin = "Origin";
        const string AccessControlRequestMethod = "Access-Control-Request-Method";
        const string AccessControlRequestHeaders = "Access-Control-Request-Headers";
        const string AccessControlAllowOrigin = "Access-Control-Allow-Origin";
        const string AccessControlAllowMethods = "Access-Control-Allow-Methods";
        const string AccessControlAllowHeaders = "Access-Control-Allow-Headers";

        protected override Task<HttpResponseMessage> SendAsync(HttpRequestMessage request, CancellationToken cancellationToken)
        {
            bool isCorsRequest = request.Headers.Contains(Origin);
            bool isPreflightRequest = request.Method == HttpMethod.Options;
            if (isCorsRequest)
            {
                if (isPreflightRequest)
                {
                    return Task.Factory.StartNew(() =>
                    {
                        HttpResponseMessage response = new HttpResponseMessage(HttpStatusCode.OK);
                        response.Headers.Add(AccessControlAllowOrigin, request.Headers.GetValues(Origin).First());

                        string accessControlRequestMethod = request.Headers.GetValues(AccessControlRequestMethod).FirstOrDefault();
                        if (accessControlRequestMethod != null)
                        {
                            response.Headers.Add(AccessControlAllowMethods, accessControlRequestMethod);
                        }

                        string requestedHeaders = string.Join(", ", request.Headers.GetValues(AccessControlRequestHeaders));
                        if (!string.IsNullOrEmpty(requestedHeaders))
                        {
                            response.Headers.Add(AccessControlAllowHeaders, requestedHeaders);
                        }

                        return response;
                    }, cancellationToken);
                }
                else
                {
                    return base.SendAsync(request, cancellationToken).ContinueWith(t =>
                    {
                        HttpResponseMessage resp = t.Result;
                        resp.Headers.Add(AccessControlAllowOrigin, request.Headers.GetValues(Origin).First());
                        return resp;
                    });
                }
            }
            else
            {
                return base.SendAsync(request, cancellationToken);
            }
        }
    }

사용하려면 등록 된 메시지 핸들러 목록에 추가하십시오.

config.MessageHandlers.Add(new CrossDomainHandler());

브라우저의 모든 프리 플라이트 요청이 처리되고 전달 [HttpOptions] IHttpActionResult되므로 컨트롤러 에서 메서드 를 구현할 필요가 없습니다 .


 var cors = new EnableCorsAttribute("*","*","*");
 config.EnableCors(cors);

 var constraints = new {httpMethod = new HttpMethodConstraint(HttpMethod.Options)};
 config.Routes.IgnoreRoute("OPTIONS", "*pathInfo",constraints);

ReferenceURL : https://stackoverflow.com/questions/18619656/enable-cors-in-web-api-2

반응형