React - CORS 오류에 대하여

리액트로 개발하다보면 항상 우리를 괴롭히는 CORS 오류를 만나볼 수 있다.

자바스크립트에서 api를 요청했을 때 브라우저가 오류를 엄청 내뿜는 것을 뜻하는데, 이렇게 되는 이유는 기본적으로 브라우저는 하나의 서버 연결만 허용되도록 설정이 되어있는데, 서로 다른 도메인에 대한 요청을 보내기 때문에 보안상 제한을 하는 것이다.

 

CORS는 함축 요약 단어로 Cross - Origin Resource Sharing 이라는 단어이다.

이 문장은 교차 출처 리소스 공유 정책 인데, 간단하게 엇갈린 다른 출처를 공유하려하니 오류가 나는 것이다.

 

 

사실 

https://inpa.tistory.com/entry/WEB-%F0%9F%93%9A-CORS-%F0%9F%92%AF-%EC%A0%95%EB%A6%AC-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95-%F0%9F%91%8F

[WEB] 📚 악명 높은 CORS 개념 & 해결법 - 정리 끝판왕 👏

여기서 정말 자세히 잘 나와있어, 나는 이정도로 요약하고 그래서 어떻게 CORS를 프론트 단에서 해결해야 하는 지, 고민을 해야한다.

 

일단 서버에서 바로 처리할 수 없는 상황, 그래도 api를 테스트를 해봐야하는 상황에서 사용하기 좋은 방법 중 하나는,

 

Package.json에서 Proxy를 설정하는 것이다.

// package.json
{
	...
    "proxy": "http://localhost:8000"
}

 

이렇게 package.json의 맨 마지막에 proxy를 추가해주면 된다. 이렇게 추가를 하고 나면 우리가

axios.get('http://localhost:8000/api/1133) 라고 적었던 것을 axios.get('/api/1133') 로 api를 사용해주면 된다.

 

여러개의 proxy 서버가 필요하다면, 객체 형태로 넣어주면 된다.

// package.json
{
	...
    "proxy": {
    	"/api": {
        	"target": "http://localhost:8000"
		},
        "/auth": {
        	"target": "http://localhost:8040"
		} 
	}
}

이렇게 axios.get('/auth/1123') axios.get('/api/1122')로 요청 보내면 된다. 

 

물론 이렇게 하면 배포할 때나, 그럴때 문제가 있겠지만, 간단히 테스트를 해야하는 상황에서는 간단히 CORS 오류를 이렇게 처리하는 편이 정신건강에 좋다.

 

물론 node.js 를 이용해서 따로 서버를 만들어서 관리해줄 수도 있지만, 서버가 따로 분리되어 있거나, 다른 사람과 작업을 하는 부분에서 다른 사람이 서버 설정을 해주지 않는다면 테스트조차 못하는 상황일테니, 임시로 proxy 서버를 지정해주는 것이 좋다.