cors(2022.05.11)

CORS(Cross-Origin Resource Sharing)는 웹페이지에서 다른 도메인의 자원을 안전하게 요청할 수 있도록 하는 보안 메커니즘입니다. 웹 브라우저는 기본적으로 같은 출처 정책(Same-Origin Policy)을 따르기 때문에, 다른 도메인에서 호스팅되는 API로부터 데이터를 가져오려 할 때 CORS 오류가 발생할 수 있습니다. 이를 해결하기 위해 서버 측에서 적절한 CORS 헤더를 설정해야 합니다.

CORS 오류 해결

Node.js 환경에서 API를 개발할 때, 클라이언트(예: 웹 브라우저)에서 서버의 리소스를 요청하고 CORS 오류가 발생하면 cors 미들웨어를 사용하여 해결할 수 있습니다. 다음은 이 과정을 구현하는 방법입니다:

 

cors 설치

yarn add cors

 

cors 미들웨어 import 

import cors from 'cors';

 

미들웨어 사용

app.use(cors());

 

 

 

CORS(Cross-Origin Resource Sharing)란?

CORS는 다른 도메인(origin)에서 자원에 접근할 수 있도록 허용하는 표준입니다. 기본적으로 브라우저는 동일 출처 정책(Same-Origin Policy)을 따르며, 이는 보안상의 이유로 한 출처(origin)에서 로드된 문서나 스크립트가 다른 출처의 리소스와 상호작용하는 것을 제한합니다.

CORS와 Same-Origin Policy (SOP)

• Same-Origin Policy: 이 정책은 웹 보안의 기본적인 부분으로, 한 출처에서 로드된 문서나 스크립트가 다른 출처의 리소스와 상호작용을 제한합니다. 예를 들어, https://example.com 페이지에서는 기본적으로 https://example.net의 API를 직접 호출할 수 없습니다.
• CORS: 서버 설정에 따라 다른 출처의 요청을 허용할 수 있습니다. 예를 들어, https://example.net 서버가 적절한 CORS 헤더를 포함하여 응답하면, https://example.com에서 https://example.net의 데이터를 안전하게 요청하고 사용할 수 있습니다.

CORS 프로세스

1. Preflight Request: 브라우저는 본 요청을 보내기 전에 "Preflight" 요청을 보내어 서버가 해당 요청을 허용하는지 확인합니다. 이는 주로 OPTIONS 메소드를 사용하여 수행됩니다.
2. 서버 응답: 서버는 Access-Control-Allow-Origin과 같은 CORS 헤더를 포함한 응답을 보냅니다. 이 헤더는 어떤 출처(origin)들이 리소스에 접근할 수 있는지 지정합니다.

CORS의 중요성

CORS는 브라우저가 안전하지 않은 상호 출처 사이트 요청을 차단함으로써, 사용자의 데이터 보호와 사이트의 보안을 강화합니다. 또한, 이를 통해 개발자는 통제된 방식으로 리소스 공유를 허용할 수 있습니다.

 

 

 

 

 

코드캠프에서 제공한 이미지

 

 

fetch(vscode에 내장되어있긴함), axios(제일많이사용함) -> 백엔드와 소통하는방식