>웹 프론트엔드 >JS 튜토리얼 >'Access-Control-Allow-Origin' 헤더는 CORS(Cross-Origin Resource Sharing)를 어떻게 활성화합니까?

'Access-Control-Allow-Origin' 헤더는 CORS(Cross-Origin Resource Sharing)를 어떻게 활성화합니까?

Patricia Arquette
Patricia Arquette원래의
2024-12-27 07:28:13648검색

How Does the `Access-Control-Allow-Origin` Header Enable Cross-Origin Resource Sharing (CORS)?

CORS의 'Access-Control-Allow-Origin' 헤더 이해하기

CORS(Cross-Origin Resource Sharing)를 사용하면 한 원본에서 로드된 JavaScript 코드가 리소스에 액세스할 수 있습니다. 다른 출신에서. 'Access-Control-Allow-Origin' 헤더가 이러한 교차 출처 액세스를 어떻게 촉진하는지 이해하는 것이 중요합니다.

'Access-Control-Allow-Origin' 작동 방식

클라이언트가 다른 출처의 리소스가 있는 경우 서버는 'Access-Control-Allow-Origin' 헤더로 응답할 수 있습니다. 이 헤더는 리소스에 액세스할 수 있는 원본을 지정합니다. 기본 동작은 모든 교차 출처 요청을 거부하는 것입니다.

교차 출처 액세스를 활성화하려면 서버는 응답에 'Access-Control-Allow-Origin' 헤더를 추가해야 합니다. 이 헤더의 값은 특정 도메인(예: 'http://siteB.com') 또는 '*'일 수 있으며 이는 모든 원본이 리소스에 액세스할 수 있음을 나타냅니다.

비단순 처리 요청

일반적으로 GET 또는 POST 이외의 HTTP 메서드나 비표준 요청 헤더를 포함하는 단순하지 않은 요청의 경우 브라우저는 먼저 실행 전 OPTIONS 요청을 보냅니다. 이 요청은 서버가 의도한 요청을 수락할지 여부를 확인합니다.

서버가 적절한 'Access-Control-Allow-Headers' 및 'Access-Control-Allow-Methods' 헤더를 사용하여 OPTIONS 요청에 응답하면 브라우저는 실제 요청을 진행합니다.

사용 예

다음을 고려하세요. 시나리오:

사이트 A: https://siteA.com
사이트 B: https://siteB.com

To 사이트 A에서 다운로드한 JavaScript 코드를 활성화하여 사이트 B:

  1. 사이트의 리소스에 액세스하세요. A: 사이트 B:
fetch('https://siteB.com/myCode.js')
  // ...
  1. 사이트 B:에서 JavaScript 코드를 가져옵니다. '액세스 제어- 원산지 허용' 헤더:
Access-Control-Allow-Origin: https://siteA.com
  1. JavaScript(사이트 A): JavaScript 코드는 이제 사이트 B에 요청할 수 있습니다:
fetch('https://siteB.com/api/data')
  // ...

'Access-Control-Allow-Origin' 헤더의 작동 방식을 이해하면 교차 출처 리소스를 효과적으로 활성화할 수 있습니다. 공유하여 JavaScript 코드가 다양한 출처의 리소스에 원활하게 액세스할 수 있도록 합니다.

위 내용은 'Access-Control-Allow-Origin' 헤더는 CORS(Cross-Origin Resource Sharing)를 어떻게 활성화합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.