API에 대한 CORS 지원 사용

온라인에서 편집하기

API에 대한 CORS(Cross-Origin Resource Sharing) 지원을 사용 가능하게 설정할 수 있습니다. CORS를 사용하면 웹 페이지의 임베디드 스크립트가 도메인 경계에서 API를 호출할 수 있습니다.

시작하기 전에

이 태스크는 OpenAPI 3.0 API 정의 구성과 관련이 있습니다. OpenAPI 2.0 API 정의를 구성하는 방법에 대한 세부사항은 OpenAPI 2.0 API 정의 편집을 참조하십시오.

이 태스크에 대한 정보

참고:

CORS 지원은 오직 에서만 가능합니다 DataPower® API Gateway.
CORS가 활성화되면 API Gateway는 cors 프리플로우 정책을 실행하여 API에 대한 모든 CORS 요청을 처리합니다.
CORS가 활성화되고 프리플라이트 요청이 수신되면 다음 API 조치만 수행됩니다.
- cors 프리플로우 정책이 적절한 응답 헤더를 구성합니다.
- 응답 헤더가 설정됩니다.
프리플라이트 요청이 수신되면 request.attributes.isCORSPreflight 플래그가 true로 설정됩니다.
모든 사전 실행 요청에 대해, ` CORS ` security 이 활성화되었는지 여부와 관계없이 ` client-identification preflow` 정책은 항상 건너뜁니다.

API Designer UI 애플리케이션을 사용하거나 브라우저 기반 API Manager UI를 사용하여 이 태스크를 완료할 수 있습니다.

언제든지 소스 아이콘을 클릭하면 기본 OpenAPI 소스 아이콘 OpenAPI YAML 소스 파일로 바로 전환할 수 있습니다. 양식 화면으로 돌아가려면 양식 아이콘을 클릭하세요 .

프로시저

API에 대한 CORS 지원을 사용 가능하게 하려면 다음 단계를 완료하십시오.

OpenAPI 3.0 API 정의 편집에 설명된 대로 편집할 API를 여십시오.
게이트웨이 탭을 선택하고, 게이트웨이 및 포털 설정을 확장한 다음 을 클릭합니다 CORS.
페이지가 CORS 열립니다.
CORS 활성화 선택
선택 사항: ‘ CORS ’ 정책을 구성합니다.
CORS 정책을 생성해야 합니까? 다음 고려사항을 검토하십시오.
- CORS 정책은 API 정의의 선택적 구성 요소입니다. API 정의에 CORS 정책이 없지만 CORS 이 활성화된 경우, 모든 오리진(Origin)에서 CORS 요청이 허용됩니다.
  모든 Origin에서 CORS 요청을 허용하려면 CORS 를 활성화하되, API 정의에 CORS 정책을 추가하지 마십시오.
- CORS 정책을 생성하면, CORS 요청은 CORS 정책에 포함된 CORS 규칙에 명시적으로 나열된 원본(Origin)에서만 허용됩니다. CORS 다른 오리진에서의 요청은 모두 거부됩니다.
  제한된 수의 오리진(Origin)에서만 CORS 요청을 수락하려면(Access-Control-Allow-Credentials 및 Access-Control-Expose-Headers 응답 헤더도 구성할 수 있음), CORS 를 활성화하고 CORS 정책을 생성해야 합니다. CORS 정책의 CORS 규칙에 명시적으로 허용된 원본(allow-origin)만 허용됩니다. CORS 에 대한 요청은 허용된 원본이 아닌 경우 거부됩니다.
- 새 CORS 정책을 구성하려면 다음 단계를 완료하십시오.
  1. CORS 정책 옆에 있는 추가를 클릭합니다.
  2. 헤더 Access-Control-Allow-Credentials: true를 응답에 포함시키려면, 신임 정보 허용을 선택하십시오. Access-Control-Allow-Credentials 응답 헤더는 요청의 신임 정보 모드(Request.credentials)가 include로 설정되면 응답을 프론트엔드 JavaScript 코드에 노출시킬 지 여부를 나타냅니다.
  3. 다음 값 중 하나 이상을 Access-Control-Expose-Headers 응답 헤더에 추가하려면 헤더 노출을 선택하고 다음 옵션에서 선택하십시오.
    - 사전 정의됨 -게이트웨이의 사전 정의된 값입니다. 이 옵션은 기본적으로 선택됩니다.
    - 백엔드 -백엔드 응답의 Access-Control-Expose-Headers 값입니다.
    - 사용자 정의 -사용자 정의 문자열입니다.
  4. 작성을 클릭하십시오.
  5. 허용된 오리진 옆에 있는 추가를 클릭하십시오.
  6. 원본 URL을 입력하고 작성을 클릭하십시오. 이 설정은 응답이 지정된 원본으로부터 요청하는 코드와 공유할 수 있음을 표시합니다.
- 기존 CORS 정책을 수정하려면, CORS 페이지에서 해당 허용된 원본 항목을 클릭하십시오. 그런 다음 개별 원본 URL을 수정하고, 추가 원본을 추가하고 신임 정보 허용 설정을 변경할 수 있습니다.
예
다음 예제에는 세 가지 규칙이 있습니다.
- https://example.com의 원본 헤더를 승인하고 CORS 응답으로 Access-Control-Allow-Credentials: true를 리턴합니다.
- http://domain.com의 원본 헤더를 승인하십시오. Access-Control-Allow-Credentials 헤더가 응답에서 리턴되지 않습니다.
- 다음 원본 헤더를 승인하십시오.
  
  http://example2.com
  
  http://example3.com
  
  http://example4.com
  
  Access-Control-Allow-Credentials 헤더가 응답에서 리턴되지 않습니다.
```
  cors:
    enabled: true
    policy:
      -
        allow-origin:
          - 'https://example.com'
        allow-credentials: true
      -
        allow-origin:
          - 'http://domain.com'
      -
        allow-origin:
          - 'http://example2.com'
          - 'http://example3.com'
          - 'http://example4.com'
```
저장을 클릭하여 변경사항을 저장하십시오.
선택 사항: 사용자 정의 OPTIONS 연산을 사용하여 자체적인 CORS 솔루션을 구현하려면 다음 단계를 따르십시오.
1. 사용자의 HTTP 응답에 다음 헤더를 추가하십시오.
```
Access-Control-Allow-Origin: https://<portalhostname>
Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept 
```
  여기에는 개발자 포털 소비자 <portalhostname> 카탈로그의 호스트 이름을 입력하세요.
2. 선택 사항: API를 강제 호출 API로 API ConnectAI Gateway 설정하여 프록시하면 CORS 처리가 자동으로 이루어집니다.
중요:
- 자체 CORS 솔루션을 구현하는 경우, 3 단계에 설명된 옵션을 CORS 반드시 비활성화해야 합니다
- CORS 사전 플라이트 요청은 HTTP OPTIONS 메소드를 사용하여 전송됩니다. 따라서 이러한 요청을 API ConnectAI Gateway 게이트웨이에서 처리하도록 하려면, 프리플라이트 요청을 처리할 모든 API에 대해 해당 OPTIONS 메서드를 활성화해야 합니다. 자세한 내용은 ‘REST API 경로 정의’를 참조하십시오.
- OPTIONS 요청은 구성된 비율 한계에서 API 호출로 계산됩니다. 개별 작업에 속도 제한을 적용할 수 있다는 점에 유의하십시오. 자세한 내용은 ‘API 작업에 대한 속도 제한 정의’를 참조하십시오.