정보실

웹학교

정보실

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

본문

웹 개발자인 경우 API를 호출하려고 할 때 화면에 'CORS'오류가 자주 나타나는 것을 확인해야 합니다. 

그러나 왜 이런 일이 발생합니까?

Alt Text 


https://dev.to/dipakkr/how-cors-cross-origin-resource-sharing-works-31n 


보안상의 이유로 브라우저는 스크립트에서 시작된 원본 간 HTTP 요청을 제한합니다. 

예를 들어 https://example.com에 호스팅 된 클라이언트 측 프런트 엔드 응용 프로그램에서 https://api.github.com에 호스팅 된 API에 액세스하려는 경우. 브라우저는 이 요청을 완료 할 수 없습니다.


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

  1. 브라우저에서 액세스 한 API.
  2. API는 별도의 도메인에서 호스팅 됩니다.

CORS Same Origin 


왜 이런 일이 발생합니까?


브라우저는 동일 출처 정책이라는 보안 기능을 시행합니다. 동일한 오리진 정책에 따르면 동일한 오리진 호출은 허용되고 다른 오리진 호출은 허용되지 않습니다.


어 !! 이 같은 원점, 다른 원점은 무엇입니까? 더 자세히 보도록 하겠습니다. 브라우저는 Origin을 Scheme, Host 및 Port의 조합으로 정의합니다.

  • Scheme name — 인터넷의 리소스에 액세스하는 데 사용되는 프로토콜입니다. Scheme name 뒤에는 세 개의 문자가 : //입니다. 가장 일반적으로 사용되는 프로토콜은 http : //, https : //, ftp : // 및 mailto : //입니다.
  • Hostname — 리소스가 있는 호스트의 주소입니다. 호스트 이름은 호스트 컴퓨터에 할당 된 도메인 이름입니다. 일반적으로 호스트의 로컬 이름과 상위 도메인 이름의 조합입니다. 예를 들어, www.dev.to는 호스트의 시스템 이름 www과 도메인 이름 dev.to로 구성됩니다.
  • Port Number — 포트는 응용 프로그램이 실행되는 통신 엔드 포인트입니다. 포트 번호에 대한 자세한 내용. 이 [Link] (https://en.wikipedia.org/wiki/Port_ (computer_networking)를 확인하십시오.

Scheme, Hostname 및 Port의 이 세 가지 조합이 동일한 경우 브라우저는 이를 동일한 출처로 식별합니다. 그리고 요청이 완료됩니다.


따라서 Cross-Origin HTTP 요청을 할 수 없다는 것을 의미합니까 ??


내 대답은 아니오.


바로 CORS가 Cross-Origin Resource Sharing 메커니즘을 도입 한 곳입니다.


CORS 작동 방식 


CORS는 서버가 특정 출처를 명시적으로 허용하고 동일한 출처 정책을 우회하도록 도와줍니다.


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


예를 들어 https://api.dipakkr.com/users에서 호스팅 되는 API 서버가 CORS로 구성되어 있고 클라이언트 응용 프로그램 https://github.com에서 일부 데이터를 가져 오도록 요청하고 있습니다. 응답에는 이 헤더가 있습니다.


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


CORS header 


CORS 프리 플라이트 요청 


프리 플라이트 요청은 먼저 OPTIONS 메소드에 의해 HTTP 요청을 다른 도메인의 자원으로 보내 실제 요청이 전송하기에 안전한지 여부를 판별합니다.


CORS Preflight 요청에 대한 자세한 내용은 MDN에서 확인하거나 Akshay Saini의 비디오를 확인하십시오.


CORS를 활성화하는 방법 


서버 응용 프로그램에서 CORS를 활성화합니다. 두 가지가 필요합니다.

  1. 먼저 화이트리스트의 출처를 결정해야 합니다.
  2. 둘째, CORS 미들웨어를 서버에 추가해야 합니다.

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


먼저 이 링크에서 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 : "*"을 입력하는 것은 위험하므로 절대 그렇게 하지 않아야 합니다.


CORS에 대한 자세한 내용은 MDN을 방문하십시오. 웹 개발자에게는 훌륭한 장소입니다.



페이지 정보

조회 36회 ]  작성일19-12-20 20:48

웹학교