[C#] Web API 개발 시 Cross Domain

Web API 개발 시 동일한 도메인이 아닌 곳에서도 호출할 수 있도록 하려면, Cross Domain 관련 설정을 해 줘야 합니다. 호출 하는 쪽에서 꼼수로 어쩌고 저쩌고 해 봐도, 결국 만나게 되는 문제입니다.

다음 캡처는, 특정 Web API를 다른 도메인에 만들어 놓고, jQuery로 해당 API를 호출했을 때에 볼 수 있는 오류 입니다. (특정 애플리케이션을 통해 호출하는 경우엔 Cross Domain 문제가 발생하진 않습니다.)

"호출하는 쪽에서 꼼수로 어쩌고 저쩌고 해 봐도" 라는 말의 의미는, 뭐 익숙하신 분들은 "당연한 거 아냐?" 하시겠지만, 제 경우 그것 가지고 몇 시간 정도(몇 일은 아니에요) 찾아보고 고민해 봐서 말씀 드리는 데, 서버 단에서 해당 api를 Cross Domain 접근에 대해 허용하지 않으면 안 된다는 겁니다.

그 때문에 이 내용은, 내가 서버의 웹 API를 개발해서 다른 사용자에게 배포하거나, 내가 내부적으로 사용할 웹 API를 개발할 때에 적용되는 내용입니다.

간단히 말하자면, WEB API 2 에서는 다음 링크에 있는 NuGet Package 를 설치하면 됩니다.

https://www.nuget.org/packages/Microsoft.AspNet.WebApi.Cors

하지만, 부득이한 환경 상, WEB API 2 이전 버전에서도 설정해야 하는 경우가 있는데요, 그런 경우에 대해 이것저것 해 봤습니다만, 제가 해 보았던 (성공한) 방식에 대해 좀 적고자 합니다.

어려운 거 없습니다.

웹 서버 프로젝트의 Global.asax(Global.asax.cs)의 Application_BeginRequest 메서드를 수정해 주면 됩니다. 다음과 같이 Response Header에 몇 가지 설정 값을 추가해 주면 됩니다.

protected void Application_BeginRequest(object sender, EventArgs e)
{
	HttpContext.Current.Response.Cache.SetCacheability(HttpCacheability.NoCache);
	HttpContext.Current.Response.Cache.SetNoStore();
	EnableCrossDmainAjaxCall();
}

private void EnableCrossDmainAjaxCall()
{
	HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");

	if (HttpContext.Current.Request.HttpMethod == "OPTIONS")
	{
		HttpContext.Current.Response.AddHeader(
			"Access-Control-Allow-Methods", "GET, POST");
		HttpContext.Current.Response.AddHeader(
			"Access-Control-Allow-Headers", "Content-Type, Accept");
		HttpContext.Current.Response.AddHeader(
			"Access-Control-Max-Age", "1728000");
		HttpContext.Current.Response.End();
	}
}

Web.config 에 해당 내용을 넣으면 되지 않느냐? 될 수도 있고 안 될 수도 있습니다. 하지만, 제가 해 본 테스트 결과로는, Web.config 에 추가를 해도 작동하지 않았습니다. 그리고, 코딩에서 헤더를 추가 했으면, Web.config 의 Access-Control-Allow-Origin 등은 모두 없애줘야 합니다.