[ASP.NET] No ‘Access-Control-Allow-Origin’ 해결 방법

서버에서 웹 API를 구축을 한 후

Ajax 호출을 통해이 웹 API를 사용하려고하면

No ‘Access-Control-Allow-Origin’ 이라는 오류 메시지를 보게된다.

호출하려는 API가 같은 서버안에 구축되어 있다면 관계없겠지만

외부에서 호출을 해야할 일이 생긴다면 곤혹스러운 일이다.

 

이유는 간단하다.

브라우저는 보안을 위해 다른 도메인에서

중요한 데이터를 가져 오지못하게 하기 때문이다.

 

때문에 이걸 해결하려면

다른 사이트가 우리 웹 API를 호출할 수있게 허용을 해주면 된다.

이것을 Cross Origin Resource Sharing (CORS) 라고 한다.

 

이 문제는 다음 두 가지 방법으로 해결할 수 있다.

  • Nuget에서 Microsoft.AspNet.WebApi.Cors 패키지를 이용하기
  • Web.config 에서 헤더 정보 추가

 

여기서는 Web.config에 헤더 정보를 추가 하여 해결을 해보도록 하자.

 

■ Web.config에 헤더 정보 추가.

먼저 Web.config에 아래 구문을 삽입해주자.

<system.webServer>
     <httpProtocol>
       <customHeaders>
         <add name="Access-Control-Allow-Origin" value="*" />
         <add name="Access-Control-Allow-Headers" value="Content-Type" />
         <add name="Access-Control-Allow-Methods" value="GET,POST,PUT,DELETE,OPTIONS" />
        <add name="Access-Control-Allow-Credentials" value="true" />
       </customHeaders>
     </httpProtocol>
 </system.webServer>

 

■ IIS HTTP 응답 헤더에 키 추가.

IIS에 구축해둔 사이트에 보면 HTTP 응답 헤더(HTTP Response Headers) 라는 항목이 있다.

해당 항목에 들어가보면 키를 추가 할 수 있다.

Web.config에 추가했던 구문을 그대로 추가 해 주자.

이름 : Access-Control-Allow-Origin

값 : *

이런 식으로 말이다.

 

완료가 되었으면 이제 웹 API 는 json을 뿜어 낼 것이다.

 

Post Author: 김 키티

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다