CORS(Cross-Origin Resource Sharing)는 어떻게 작동합니까?

웹 개발자라면 API를 호출하려고 할 때 화면에 자주 나타나는 'CORS' 오류를 보셨을 것입니다. 그런데, 왜 그럴까요?



보안상의 이유로 브라우저는 스크립트에서 시작된 교차 출처 HTTP 요청을 제한합니다. 예를 들어 https://api.github.com에서 호스팅되는 클라이언트 측 프런트엔드 애플리케이션에서 https://example.com에서 호스팅되는 API에 액세스하려는 경우입니다. 브라우저는 이 요청을 완료하도록 허용하지 않습니다.

다음과 같은 경우에만 CORS에 대해 생각하면 됩니다.

브라우저에서 API에 액세스했습니다.

API가 별도의 도메인에서 호스팅됩니다.

그렇다면 왜 이런 일이 발생합니까?

브라우저는 Same Origin Policy라는 보안 기능을 적용합니다. Same Origin Policy에 따르면 Same Origin 호출은 허용되고 Different Origin 호출은 허용되지 않습니다.

어!! 이 같은 근원, 다른 근원은 무엇입니까? 이것을 좀 더 자세히 보자. 브라우저는 Origin를 Scheme , Host 및 Port 의 조합으로 정의합니다.

체계 이름 - 인터넷에서 리소스에 액세스하는 데 사용되는 프로토콜입니다. 구성표 이름 뒤에는 세 문자://가 있습니다. 가장 일반적으로 사용되는 프로토콜은 http:// , https:// , ftp:// 및 mailto:// 입니다.

호스트 이름 - 리소스가 있는 호스트의 주소입니다. 호스트 이름은 호스트 컴퓨터에 할당된 도메인 이름입니다. 이것은 일반적으로 호스트의 로컬 이름과 상위 도메인 이름의 조합입니다. 예를 들어, www.dev.to는 호스트의 컴퓨터 이름www과 도메인 이름dev.to으로 구성됩니다.

포트 번호 - 포트는 애플리케이션이 실행되는 통신 끝점입니다. 포트 번호에 대한 자세한 내용은. 이 [링크]를 확인하십시오( https://en.wikipedia.org/wiki/Port_(computer_networking) .

Scheme, Hostname 및 Port의 세 가지 조합이 동일하면 브라우저는 이를 Same Origin으로 식별합니다. 그리고 요청이 완료됩니다.

So, Does it means that it is impossible to make Cross-Origin HTTP request ??

내 대답은 아니오 야.

바로 여기에서 CORS, Cross-Origin Resource Sharing 메커니즘이 등장합니다.

CORS 작동 방식

CORS를 사용하면 서버가 명시적으로 특정 출처를 화이트리스트에 추가하고 정책을 우회하는 데 도움이 됩니다same-origin.

서버가 CORS용으로 구성된 경우 각 응답에 "Access-Control-Allow-Origin"이 포함된 추가 헤더를 반환합니다.

예를 들어, https://api.dipakkr.com/users에서 호스팅되는 내 API 서버가 CORS로 구성되어 있고 내 클라이언트 애플리케이션https://github.com에서 일부 데이터를 가져오도록 요청하는 경우입니다. 응답에는 이 헤더가 있습니다.

Access-Control-Allow-Origin: https://github.com

CORS 실행 전 요청

Preflighted 요청은 먼저 OPTIONS 메서드로 HTTP 요청을 다른 도메인의 리소스로 보내어 실제 요청을 보내도 안전한지 확인합니다.

MDN에서 CORS 프리플라이트 요청에 대한 자세한 내용을 읽거나 Akshay Saini가 작성한 내용을 확인하십시오.

CORS를 활성화하는 방법

서버 애플리케이션에서 CORS를 활성화합니다. 두 가지가 필요합니다.

먼저 화이트리스트의 출처를 확인해야 합니다.

둘째, CORS 미들웨어를 서버에 추가해야 합니다.

여기에서는 NodeJS 서버에서 CORS를 구성하는 단계를 설명합니다.

먼저 이 link에서 cors npm 패키지를 설치합니다.

npm install cors

그런 다음 서버 응용 프로그램으로 이동하여 아래 코드를 추가합니다.

// require the cors package
var cors = require('cors');

// enables cors
app.use(
  cors({
    origin: "*",
    methods: "GET,HEAD,PUT,PATCH,POST,DELETE",
    preflightContinue: false
  })
);

여기에서 내가 사용 중origin: "*"을 볼 수 있습니다. 이는 모든 도메인이 이 애플리케이션에 액세스할 수 있음을 의미합니다.

Please note that it is dangerous to put origin:"*" in a production application and you should never do that.

CORS에 대한 자세한 내용은 MDN을 참조하십시오. 웹 개발자를 위한 훌륭한 장소입니다.

마지막까지 읽으셨다면 댓글에 피드백을 남겨주세요. 피드백을 받으면 개선하는 데 도움이 됩니다.

나는 거의 매일 새로운 것에 대해 글을 씁니다. 당신은 나를 따라갈 수 있습니다 |

Subscribe to my email newsletter and stay updated!

게시물이 마음에 드셨다면 ❤️를 주세요!! 건배