지독히도 잊고있던 CORS에러를 공휴일 조회 API를 연동하면서 다시 한 번 마주쳤다...
모처럼 또다시 삽질한 김에 CORS에러에 대해서 정리를 해보도록 하겠다...!

📌 먼저, CORS란 무엇인가

CORS(Cross-Origin Resource Sharing) : 교차 출처 리소스 공유

우선 브라우저는 동일출처정책(SOP)에 따라 동일한 출처에서만 리소스를 공유할 수 있게 되어있다.
그런데 만약 https://www.naver.com 에서 https://www.google.com , http://www.naver.com 에 있는 리소스를 공유하려고 할 때 출처(Origin), 즉 protocol, host, port가 다른 곳에서 리소스를 요청하게 된다.

교차 출처에서 리소스를 요청하게 된다면 응답받는 origin의 서버단에서는 200 ok를 던져주게 된다.
서버단이 아니라 브라우저에서 판단하기 때문에 브라우저에서 '엇, origin이 다르네?' 하고 CORS 정책을 확인하고 위반한 요청일 경우 접근을 막아버리는 것이다.

이것이 우리가 익히 아는 CORS 에러이다.

---

📌 어떻게 해결할 수 있는가

✔️ 백엔드단에서 해결하기

백엔드 개발자에게 부탁하기..

서버에서 Access-Control-Allow-Origin 헤더에 요청하는 주소를 정확히 명시해 '해당 주소는 접근을 허용한다' 라고 브라우저 쪽으로 알려주면 된다.

Access-Control-Allow-Origin: * 로 어떤 주소든 접근을 허용하겠다고 명시해도되지만 보안상의 이슈가 있어 지양하는 것이 좋다.

✔️ 프론트단에서 직접 해결하기

인증 정보로 쿠키를 사용한다면 ?

CORS는 기본적으로 쿠키의 사용을 막고있기 때문에 쿠키 허용 설정을 안해주었을 경우에도 CORS에러가 발생할 수 있다. 인증 정보로 쿠키를 사용한다면 요청, 응답 시 credentials 부분을 true로 설정해주어야 한다.

요청(클라이언트)

fetch 메소드 인 경우

fetch(url, {
  credentials: 'include'
}) 

axios 라이브러리를 사용하는 경우

axios.post(
    'https://example.com:1234', 
    { withCredentials: true }
).then(response => { 
})

응답(서버)

// node, express 기준
const cors = require('cors');

const app = express();

app.use(cors({
    credential: 'true'
}));

프록시 설정하기

// package.json 파일
{ ... 
"proxy" : "우회할 API 주소"
}

CRA로 설정한 프로젝트에서는 package.json에 해당 방식으로 proxy를 설정할 수 있다.
우회할 API 주소가 여러개라면 http-proxy-middleware 라이브러리를 사용해서 프록시를 설정할 수도 있다.

http-proxy-middleware 라이브러리는 로컬환경에서만 잘 돌아간다...

---

잊을만하면 괴롭히는 CORS에러... 하나씩 시도하면서 해결하면 될것이다!