자바스크립트 코드가 "요청된 자원에 'Access-Control-Allow-Origin' 헤더가 존재하지 않음" 오류를 받는 이유는 무엇인가요, 그러나 Postman은 오류가 발생하지 않나요?

나는 Flask에서 내장된 RESTful API에 연결하여 JavaScript를 사용하여 인증을 시도하고 있습니다. 그러나 요청을 보내면 다음과 같은 오류가 발생합니다:

XMLHttpRequest은 http://myApiUrl/login을 불러올 수 없습니다.
요청한 리소스에 'Access-Control-Allow-Origin' 헤더가 없습니다.
'null' 출처는 따라서 액세스가 허용되지 않습니다.

API 또는 원격 리소스가 헤더를 설정해야 한다는 것을 알고 있지만, 왜 크롬 확장 프로그램 Postman을 통해 요청을 보냈을 때 작동되는 건가요?

이것은 요청 코드입니다:

$.ajax({
  type: 'POST',
  dataType: 'text',
  url: api,
  username: 'user',
  password: 'pass',
  crossDomain: true,
  xhrFields: {
    withCredentials: true,
  },
})
  .done(function (data) {
    console.log('done');
  })
  .fail(function (xhr, textStatus, errorThrown) {
    alert(xhr.responseText);
    alert(textStatus);
  });

답변 1

만약 제대로 이해하고 있다면, 당신은 페이지와 다른 도메인으로 XMLHttpRequest를 수행하고 있습니다. 따라서 보안상의 이유로 브라우저가 차단하고 있습니다. 크로스 도메인 요청을 수행하려면 다른 방법을 사용해야 합니다.

Postman을 사용하는 경우, 이 정책에 제한이 없습니다. Cross-Origin XMLHttpRequest에서 인용한 내용:

일반 웹 페이지는 XMLHttpRequest 객체를 사용하여 원격 서버로부터 데이터를 송수신할 수 있지만, 동일 출처 정책에 의해 제한됩니다. 확장 프로그램은 이러한 제한이 없습니다. 확장 프로그램은 크로스 도메인 권한을 요청하면 자신의 출처 외부의 원격 서버와 통신할 수 있습니다.

답변 2

JavaScript 코드는 요청한 리소스에 'Access-Control-Allow-Origin' 헤더가 없음 오류를 받는 동시에 Postman은 그렇지 않은 이유는 무엇일까요? 이 주제에 대해 SEO 염두에 둔 한국어 에세이를 작성해 보겠습니다.
크로스 오리진 리소스 공유(CORS)는 웹 어플리케이션에서 도메인, 프로토콜 또는 포트가 다른 리소스에 접근할 수 있는 정책을 정의합니다. 해당 오류 메시지는 JavaScript 코드가 서로 다른 도메인에서 리소스를 요청했을 때 발생합니다. 그러나 Postman은 이러한 오류를 받지 않는 이유는 Postman이 브라우저가 아니라 독립 실행형 클라이언트 애플리케이션이기 때문입니다.
브라우저에서 JavaScript 코드로 API 요청을 보내면, 해당 요청에는 보안 상의 이유로 동일 출처 정책(same-origin policy)이 적용됩니다. 즉, JavaScript 코드는 동일한 도메인, 프로토콜 및 포트에서만 리소스를 요청할 수 있습니다. 이러한 제약으로 인해 외부 도메인으로 API 요청을 보내면 브라우저는 클라이언트의 보안을 위해 CORS 체크를 수행합니다.
Postman은 브라우저가 아니며 CORS 제약을 강제하지 않으므로 외부 도메인에서 리소스를 요청할 때 No 'Access-Control-Allow-Origin' 헤더가 없음 오류를 받지 않습니다. Postman은 계속해서 요청을 보냄으로써 응답을 수신하는 반면, 브라우저는 오류로 인해 요청을 중단하고 JavaScript 코드에서 오류를 처리합니다.
이 오류를 해결하기 위해 두 가지 주요 방법이 있습니다. 첫째, 서버 측에서 API 엔드포인트에 Access-Control-Allow-Origin 헤더를 명시하여 JavaScript 코드에서 리소스 요청이 허용되도록 해야 합니다. 이를 통해 브라우저는 서버가 API 요청을 허용하는지 확인할 수 있습니다.
둘째, 서버 측에서 브라우저가 클라이언트의 코드에서 직접 요청을 보낼 수 있도록 CORS 정책을 구성해야 합니다. 이를 위해 서버는 Access-Control-Allow-Origin 헤더와 함께 동일 출처 정책이나 필요한 권한 요구사항을 설정해야 합니다. 이를 통해 브라우저는 외부 도메인 API 요청에 대해 CORS 체크를 통과할 수 있습니다.
이렇게 서버 측에서 적절한 CORS 정책을 구성하면 JavaScript 코드에서 외부 도메인 리소스에 접근하는 데 성공할 수 있습니다. 그러나 반드시 보안과 관련된 사안을 고려하여 안전한 CORS 구성을 진행해야 합니다.