React에서 Cors 문제가...

최근 내 개인 프로젝트를 위해서 React와 node, next.js, typescript, tailwindcss 가 필요했다.
개발을 한창 내려놨던 터라 다시 새로운 것을 하려니 귀찮아졌다.

하지만 기존의 jQuery로 진행한 프로젝트를 모바일용으로 개발하는 것과 서버 기능 분담 등은 불가능 했다.
그래서 노마드코더 에서 강의를 들으며, 외국 성님들의 유튭 강의를 들으며 공부를 시작했다.

강의는 다 들었고, 샘플 프로젝트로 한번 개발을 시작해봤다.
그런데 fetch를 사용해서 JSON을 가져오는 부분에서 Cors 문제가 발생했다.
에러 내용은 다음과 같았다.

[Error] Origin http://localhost:3000 is not allowed by Access-Control-Allow-Origin.
[Error] Fetch API cannot load https://xxx.com due to access control checks.
[Error] Failed to load resource: Origin http://localhost:3000 is not allowed by Access-Control-Allow-Origin. (common.do, line 0)
[Error] Unhandled Promise Rejection: TypeError: Load failed
	(익명 함수) (bundle.js:202)
	asyncFunctionResume
	(익명 함수)
	promiseReactionJobWithoutPromise
	promiseReactionJob

저 위에 xxx.com은 내가 임의로 설정한 사이트다. (정보 조회 사이트 공개가 불가해서 임의로 설정했다.)

이걸 해결하는 법은 총 2개가 있다.

1. xxx.com 의 서버 사이드에서 처리해주기.
2. React의 package에서 proxy 처리 해주기.

1번 방법의 경우 나에겐 선택할 수 없는 옵션이었다. 그래서 2번을 선택했다.

처리 방법은 간단했다.

적용법

1. 자신의 프로젝트의 package.json에 proxy 항목을 추가한다.

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.2",
  ....
  },
  "proxy":"https://xxx.com",
}

proxy가 들어가는 자리는 아무데나 상관 없다. (상위 값에 가능 (dependencies 이런데는 불가))

2. 호출하는 부분에서 전체 url이 아닌 도메인을 제외한 형태로 호출한다.

예를 들어 풀 도메인이 다음과 같다면 두 번째 줄 처럼 처리하는 이야기다.

https://www.xxx.com/test/data?no=10 /test/data?no=10

그래서 호출하는 형태는 아래와 같이 될 것이다.

...
const getLottoData = async() => {
    const json = await(await fetch("/test/data?no=10")).json();
...
}

근데 급 궁금해지는 것은...만약 2개 이상의 cors 사이트를 처리해야 한다면 어떻게 해야 하나?
이 부분은 직접 처리해야 할 때 다시 다뤄볼 예정이다.