CORS란?

프론트엔드는 react로, 백엔드는 node로 개발하는 프로젝트를 진행하면서 CORS 에러와 마주쳤다.
그래서 정리를 좀 해보려고 한다.

SOP(Same-Origin Policy)

---

같은 출처에서만 리소스를 공유할 수 있다는 정책이다.

서로 다른 출처가 통신하는 것에 제약이 없다면 CSRF(Cross-Site Request Forgery), XSS(Cross-Site Scripting)과 같은 방법으로 우리의 어플리케이션에서 코드가 실행된 것처럼 꾸며 사용자 정보를 탈취하기 쉬워진다.

❓ 출처(Origin)란?

서버의 위치를 찾아가기 위해 필요한 가장 기본적인 것들을 모아둔 것
(프로토콜, 호스트, 포트번호까지 모두 합친 것을 의미)

프로토콜, 호스트, 포트번호가 동일하면 같은 출처라고 판단한다.
뒤에 오는 path, query string, fragment는 달라도 상관없다.

CORS(Cross-Origin Resource Sharing)

---

출처가 다른 곳에 요청을 보내려면 remote origin에서 전송받은 특별한 헤더가 필요하다.

이러한 정책을 CORS 라고 부른다.

CORS 동작 과정

1. 클라이언트에서 HTTP 요청 헤더에 Origin을 담아 전달

2. 서버는 응답 헤더에 Access-Control-Allow-Origin(요청을 허용하는 Origin)을 담아 클라이언트로 전달

3. 클라이언트에서 자신이 보낸 요청의 Origin과 서버가 보내준 Access-Control-Allow-Origin을 비교
   - 유효하지 않다면 응답을 사용하지 않고 버린다.
   
   

💥 CORS 정책에 의해 Origin을 비교하는 로직은 브라우저에 구현되어 있다.

서버에서 정상적인 응답을 하여 상태코드가 200이 나오더라도, 브라우저가 응답을 CORS 정책 위반이라고 분석하면 그 응답은 사용하지 않는다.

CORS 에러 해결 방법

---

1. Access-Control-Allow-Origin 헤더 설정

app.get('/', (req,res) => {
  // 모든 도메인을 허용 => 보안에 취약
  res.header("Access-Control-Allow-Origin", "*");
  // 특정 도메인을 설정해주도록 하자.
  res.header("Access-Control-Allow-Origin", "http://localhost:3000");
  ...
}

2. CORS 미들웨어 사용하기

Node.js 미들웨어 중 하나인 CORS를 사용해서 해결할 수 있다.
npm install cors 명령어로 설치하고 코드를 작성해주면 된다.

//cors 모듈 불러오기
var cors = require('cors');

//cors설정
app.use(cors());