정책을 통해 API Management에 CORS 헤더 추가

브라우저 기반 클라이언트에서 도메인 간 호출을 허용하기 위해 작업 또는 API에 CORS(교차 원본 리소스 공유) 지원을 추가합니다.

Azure API Management cross domain policies | Microsoft Docs
cors 정책은 CORS(교차 원본 리소스 공유) 지원을 작업 또는 API에 추가하여 브라우저 기반 클라이언트의 교차 도메인 호출을 허용합니다.

CORS를 사용하면 브라우저와 서버가 상호 작용하고 특정 출처 간 요청(예: 웹 페이지의 JavaScript에서 다른 도메인으로 XMLHttpRequests 호출)을 허용할지 여부를 결정할 수 있습니다. 이것은 동일한 출처 요청만 허용하는 것보다 더 많은 유연성을 허용하지만 모든 교차 출처 요청을 허용하는 것보다 더 안전합니다.

개발자 포털에서 대화형 콘솔을 활성화하려면 CORS 정책을 적용해야 합니다. 자세한 내용은 developer portal documentation을 참조하십시오.

정책 성명

XML복사

<cors allow-credentials="false|true" terminate-unmatched-request="true|false">
    <allowed-origins>
        <origin>origin uri</origin>
    </allowed-origins>
    <allowed-methods preflight-result-max-age="number of seconds">
        <method>http verb</method>
    </allowed-methods>
    <allowed-headers>
        <header>header name</header>
    </allowed-headers>
    <expose-headers>
        <header>header name</header>
    </expose-headers>
</cors>

예시

이 예는 사용자 지정 헤더 또는 GET 및 POST 이외의 메서드가 있는 요청과 같은 비행 전 요청을 지원하는 방법을 보여줍니다. 사용자 지정 헤더 및 추가 HTTP 동사를 지원하려면 다음 예제와 같이 allowed-methods 및 allowed-headers 섹션을 사용하십시오.

XML복사

<cors allow-credentials="true">
    <allowed-origins>
        <!-- Localhost useful for development -->
        <origin>http://localhost:8080/</origin>
        <origin>http://example.com/</origin>
    </allowed-origins>
    <allowed-methods preflight-result-max-age="300">
        <method>GET</method>
        <method>POST</method>
        <method>PATCH</method>
        <method>DELETE</method>
    </allowed-methods>
    <allowed-headers>
        <!-- Examples below show Azure Mobile Services headers -->
        <header>x-zumo-installation-id</header>
        <header>x-zumo-application</header>
        <header>x-zumo-version</header>
        <header>x-zumo-auth</header>
        <header>content-type</header>
        <header>accept</header>
    </allowed-headers>
    <expose-headers>
        <!-- Examples below show Azure Mobile Services headers -->
        <header>x-zumo-installation-id</header>
        <header>x-zumo-application</header>
    </expose-headers>
</cors>

위의 정책 업데이트에서 중요한 부분은 허용된 모든 출처를 반환하는 대신 응답 헤더에 하나의 출처만 추가하여 클라이언트 브라우저 측에서 CORS 출처에 헤더가 하나만 포함되어야 한다는 오류가 발생한다는 것입니다.

위의 문제에 대해 다음 아웃바운드 정책을 추가해야 합니다.

@(context.Request.Headers.GetValueOrDefault(Origin,))

행복한 코딩 :)