웹 브라우저는 보안을 위해서 동일 원본 정책(Same-Origin Policy, 특정 웹페이지에서 다른 도메인으로 AJAX 요청을 전송하는 것을 금지)을 강제합니다.
교차-원본 자원 공유(CORS, Cross-Origin Resource Sharing)는 W3C의 표준으로, 서버가 동일 원본 정책을 유현하게 우회할 수 있게 합니다. 즉, CORS를 사용하면 서버에서 명시적으로 지정한 일부 교차-원본 요청만 허용하고 다른 요청은 거부할 수 있습니다.
CORS 를 사용하면, JSONP 같은 기존 기법보다 안정하고 유연한 방법으로, 교차-원본 요청을 허용할 수 있습니다.
ASP.NET WebAPI 를 사용하는 응용 프로그램을 작성하고, 웹 응용프로그램을 작성하여 API를 호출하면 HTTP 응답코드는 200인데, 예상하는 결과와 다르게 웹 브라우저에서 응답을 거부함을 볼 수 있습니다.
웹 브라우저의 콘솔창에서 아래와 유사한 메세지를 확인할 수 있습니다.
Origin http://clientdomain.com not found in Access-Control-Allow-Origin header.
XMLHttpRequest: Network Error 0x80700013, Could not complete the operation due to error 80700013.
이전에는 이를 회피하기위해 JSONP를 활용하였습니다.
JSONP를 활용한 동일원본정책을 우회하는 것보다는 NuGet 패키지 Microsoft.AspNet.WebApi.Cors 를 설치해서 CORS를 사용하는 것이 더 좋은 방법이라 생각됩니다.
NuGet 패키지 콘솔로 설치를 하면 의존성도 간편하게 해결되므로 모듈을 수동으로 추가하기 보다는 NuGet 을 사용하여 설치를 하는 것이 좋습니다.
$ Install-Package Microsoft.AspNet.WebApi.Cors
NuGet 패키지 설치를 마쳤으면, WebApiConfig.cs 파일을 열고, 아래 코드를 추가합니다.
유연하게 정책을 추가하는 부분은 생략하고, 기본적인 동작만 확인할 것이므로, 간단하게 EnableCors() 확장메서드를 실행하는 것으로 합니다.
public static class WebApiConfig
{
public static void Register(HttpConfiguration config)
{
// Enable CORS
config.EnableCors();
}
}
설정에서 CORS 사용을 활성화하였으므로, ApiController 클래스에 적용하여, CORS를 사용할 수 있게 하려면 아래와 같이 어트리뷰트를 추가합니다.
아래와 같이 적용된 어트리뷰트는 컨트롤러에 포함된 모든 액션 메서드를 모든 도메인으로부터 허용하는 합니다.
[EnableCors(origin:"*", headers:"*", methods: "*")]
public class TestController : ApiController
{
}
이렇게 CORS 사용된 Web Api를 호출하면 이제는 예상한 결과를 얻을 수 있을 것입니다.
참조 페이지:
- Enabling Cross-Origin Requests in ASP.NET Web API 2
- Can I use Cors?
- XDomainRequest – Restrictions, Limitations and Workarounds
이 사이트는 광고를 포함하고 있습니다.
광고로 발생한 수익금은 서버 유지 관리에 사용되고 있습니다.This site contains advertisements.
Revenue generated by the ad servers are being used for maintenance.