[WIL] 6주차 → CORS

첫 협업을 진행하며 느낀 아쉬운 점, 뿌듯한 점, 어려웠던 점, 좋았던 점

 

- 아쉬운 점

: API, 와이어 프레임을 더 공들여 짜지 않았던 점

(기능을 구현하는 중간중간에 수정이 많이 들어갔기 때문에)

 

- 뿌듯했던 점

: 직접 낸 주제는 아니였지만 좋은 팀원분들을 만나고 좋은 주제의 프로젝트를 진행함으로써

자신감을 얻을 수 있었고 힘들기는 했지만 과정, 결과가 만족스러웠던 프로젝트였다는 점

 

- 어려웠던 점

: 서버와 클라이언트를 연결 할 때 axios를 사용했는 데 CORS 정책이나 header가 안보내 지는 오류, token을 받아오지 못하는 오류, Reducer에서 return을 사용하지 않아 발생한 오류 등 처음 접하는 오류가 많았어서 어려웠던 것 같습니다.

 

- 좋았던 점

: 처음에는 어려웠지만 해결 해나가면서 오류를 조금은 즐길 수 있어진 것 같고, 기능에 욕심이 생기고 어떻게 하면 좋은 코드를 짤 수 있을까 고민하고 소통 해나가는 과정이 좋았습니다.

---

CORS (Cross-Origin Resource Sharing)

: 교차 출처 리소스 공유라는 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근 할 수 있는 권한을 부여 하도록 브러우저에게 알려주는 체제이다.

 

즉, 무분별한 클라이언트가 다른 리소스에 접근하는 것을 막는 보안 이슈이다.

 

예를 들어 클라이언트가 3000 포트이고, 서버가 5000 포트라면 클라이언트가 서버에 접근 할 때 연결을 차단한다.

이유는 포트가 다르기 때문이고, 도메인이나 아이피가 달라도 안된다.

결론적으로 처음 리소르를 요청했던 그 주소가 아니라면 차단 해버린다는 것이다.

 

하지만 프론트엔드를 개발하다 보면 서버에 요청을 보낼 때 아래와 같은 오류가 console에 찍힌 것을 보았을 것이다.

Access to XMLHttpRequest at 'http://xxx' from origin 'http://localhost:3000' has been blocked by 
CORS policy: Response to preflight request doesn't pass access control check: 
No 'Access-Control-Allow-Origin' header is present on the requested resource.

 

해결 방법에는 여러 가지가 있다.

 

1) Access-Control-Allow-Origin 세팅하기

: 서버에서 응답 할 때 header에 Access-Control-Allow-Origin : *을 설정한다.

*은 모든 요청을 허용한다는 뜻이다. 하지만 가급적이면 특정 도메인을 명시하는 것이 좋다.

CORS 정책에 존재 이유가 보안 때문인데, 보안을 없앤다는 것은 CORS의 존재 이유가 사라지는 것이고 서버와 클라이언트 모두 취약 해진다는 의미이다.

 

Node.js Express를 예로 들자면 index.js에서 CORS 미들웨어 라이브러리를 제공한다.

const express = require('express');
const cors = require('cors');
const app = express();

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

Access-Control-Allow-Origin을 세팅 해주는 방법은 오직 서버 측에서만 가능하다.

클라이언트에서 해결 할 수 있는 방법에는 Proxy가 있다.

 

2) Proxy

: 유저가 인터넷에 요청을 보낼 때 직접 보내는 것이 아니라 Proxy 서버를 거쳐 최종 목적지에 전달하게 한다.

이때 Proxy 서버를 거치면서 유저의 IP를 바꿀 수 있다.

즉, 유저의 실제 IP와 포트를 알 수 없도록 하는 것이 Proxy 서버의 역할이다.

 

React 프로젝트에서 Proxy로 CORS 해결하기 (Local)

: CORS는 위에서 설명한 것처럼 처음 리소스를 요청한 주소와 다를 때 발생한다.

그렇다면 Proxy 서버를 거쳐서 처음 리소르를 요청한 주소와 동일하게 한다면 오류는 사라지지 않을까??

 

터미널에 Proxy 미들웨어 패키지를 설치한다.

npm install http-proxy-middleware

 

클라이언트와 서버에 포트를 같게 하기 위하여 위처럼 코드를 작성한다.

위 코드는 /api라는 주소로 요청을 보낼 땐 localhost:5000으로 바꿔 요청을 보낸다는 것이다.

결과적으로 클라이언트와 서버는 완전히 같은 리소스이기 때문에 CORS가 발생하지 않는다.

 

이 글의 출처의 작성자의 클라이언트는 3000 포트이고, 서버는 5000 포트였다.

Proxy를 거치면 5000 포드로 보내게 된다.

 

(출처)
https://tried.tistory.com/76

Cors란 무엇인가?