WebApi Ajax 크로스 도메인 해결방법

WebApi 를 사용해서 서비스를 하다보면 Cross Domain (크로스 도메인) 간에는 조회가

되지 않는 현상이 발생한다. (IE에서는 설정에 따라서 간혹 보이기도 하지만 크롬은 안보인다)

자 그러면 아래와 같이 하나하나씩 따라가면서 해결해보자.

1. 우선 MS에서 제공하는 WebApi.Cors 를 Nuget 패키지를 이용해서 다운로드 받아준다.(닷넷 4.5 부터 됩니다)

버전을 따로 명시해줘도 되고 안해줘도되고... 그건 그냥 사용자 마음.

Install-Package Microsoft.AspNet.WebApi.Cors -Version 5.1.2

Install-Package Microsoft.AspNet.WebApi.Cors

설치가 완료된 후에 Web.Config 파일에 아래처럼 중복된키가 들어가는 경우가 있다.

 <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />

그냥 사뿐히 지워주면 된다. 그리고 customHeaders 가 추가되어있다면 이부분 역시 사뿐히 삭제한다.

<httpProtocol>

      <customHeaders>

        <add name="Access-Control-Allow-Origin" value="*" />

      </customHeaders>

    </httpProtocol>

2. App_Data 에 WebApiConfig.cs 파일을 열고 아래와 같이  config.EnableCors(); 을 추가해준다.

 public static class WebApiConfig

    {

        public static void Register(HttpConfiguration config)

        { 

            // WebApi Routes 초기화

            // api / 컨트롤러 / 액션 / 파라미터

            config.Routes.MapHttpRoute(

                   name: "DefaultApi",

                    routeTemplate: "api/{controller}/{action}/{id}",

                    defaults: new { id = System.Web.Http.RouteParameter.Optional });

            config.EnableCors(); 

        }

    }

3. 이제 WebApi 컨트롤러에 가서 EnableCors 속성을 추가해준다.

    참고로 클래스 위에 선언해주면 해당 클래스에 하위 메소드들은 모두 적용되고, 특정 메소드에만 적용시키려면 

    해당 메소드 위에 선언해주면 된다.

 [EnableCors("*", "*", "*")]

    public class DashboardServiceController : ApiController

추가로 view 단에 스크립트에 ajax 속성을 변경해준다.

  $.support.cors = true;

이렇게 하고나서 빌드 한 후에 조회해보면 아주 잘~~ 된다.

* 추가내용 *

간혹 누겟 콘솔 명령어로 설치하면 뻑나는 경우가 있다. 골치아프니 그냥 누겟 패키지 관리자에서 

아래 체크된부분 그냥 다운로드 받아서 사용해도 된다. (솔직히 이게 더 편함)

webapi, web api, corssdomain, cross domain, asp.net, ajax, webapi2