IIS 에서 CORS 묘듈 설정하기

2023.09.13 - [IT Story/Programing] - React + ASP.Net(BackEnd)로 사용하기

React + ASP.Net(BackEnd)로 사용하기

 

위 내용으로 Backend 와 Frontend(React) 사용중 Frontend 와 Backend의 운영 위치가 다른경우 오류가 발행한다는 것을 알게 되었습니다.

오류 내용

오류내용으로 검색하다 CORS 오류 라는 것을 알게되었습니다.

 

CORS 오류란?

웹브라우저들의 보안 정책 강화이 강화되면서  CORS(Cross-Origin Resource Sharing)룰이 강화되었다. 그래서 허용하지 않은 컨텐츠를 임의로 끌어다 보여주는 것이 어렵게 되었습니다.

예를 들면,  전에는 택배사 사이트에서 원격으로 배송 정보를 가져와 보여주는 것에 별다른 제약이 없었는데, 웹브라우저의 보안 정책이 강화되면서  일부 택배사 사이트의 CORS 설정이 제대로 적용된 경우 내 웹사이트 안에 배송 정보를 아이프레임이나 AJAX로 가져와 보여주는 것이 더이상 허용되지 않는다거나 하는 경우가 생기게 되었습니다.

이제는 자신이 만든 웹사이트들 사이에서도 컨텐츠를 주고으려면 CORS 설정을 통해 별도로 허용을 해야만 컨텐츠를 가져와 보여줄 수 있습니다.

 

해결방법 

BackEnd 서버의 종류마다 설정 방법이 다릅니다. 여기서는 IIS 에서 설정하는 방법에 대해서 설명합니다.

 

1.아래 사이트에서 IIS CORS Module을 설치합니다.

    https://www.iis.net/downloads/microsoft/iis-cors-module

2. 설치 후 IIS를 재시작 합니다.

3. CORS 설정은 각 개별 사이트별로 다르게 설정 가능합니다.

    적용할 사이트의 루트에 있는 web.config 파일을 오픈하여 알 구분을 추가 합니다.

<configuration>
    <system.webServer>
        <cors enabled="true">
            <add origin="*" />
        </cors>
    </system.webServer>
</configuration>

 

CORS 태그 설명

cors enabled="true" : 원격사이트로부터 요청을 허용한다.

cors enabled="false" : 원격사이트로부터 요청을 거부한다.

add origin="*"            : 모든 곳으로부터 요청을 허용한다.

 

규칙에 대한 상세표

CORS 관련 상세 설정관련내용은 아래 링크 참고하세요 

https://learn.microsoft.com/en-us/iis/extensions/cors-module/cors-module-configuration-reference