[이론] CORS & CORS ERROR

💥 CORS?

다른 도메인(domains (en-US))에서의 자원을 호출하는 행위에 제한이 없을 경우 안전하지 않습니다. 
CORS (Cross-Origin Resource Sharing)는 이렇게 시스템 수준에서 타 도메인 간 자원 호출을 승인하거나 차단하는 것을 결정하는 것입니다.

[ 출처 : https://developer.mozilla.org/ko/docs/Glossary/CORS ]

Client - localhost:3000
Server - localhost:4000이라면 
port 번호가 다르기 때문에 당연히 두 서버의 Origin이 다르다.
ex) naver.com와 google.com의 Origin은 다르다.
그래서 서로의 origin이 다르면 자원을 호출할 수 없는 것이 당연하다.

[ 출처 : https://www.youtube.com/watch?v=d6suykcsNeY ] 

---

 

💥 CORS ERROR?

 CORS 설정이 제대로 세팅되어 있지 않다면, 브라우저 콘솔에는 다음과 같은 메시지가 표시된다.

 "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at $somesite"

해당 메시지는  CORS 보안 규칙 위반으로 인해 요청이 차단되었다는 의미로,

클라이언트는 서버에게 자원을 요구해도 origin이 다르면 Cors 정책에 의해 차단하면서 Cors Error가 발생하는 것!
클라이언트가 서버의 데이터를 꺼내가고 요청을 하는 것이기 때문에,
결국 Cors Error를 해결하기 위해서는 서버에서 Cors의 정책을 허용해야 함.

---

🔅 CORS 설정 방법

1️⃣ 서버에서 Cors의 정책 허용을 위한 라이브러리 설치

npm에서 cors 라이브러리를 검색하여 설치 후, 사용란의 코드를 복붙 하여 입맛에 맞게 사용하면 된다.
https://www.npmjs.com/package/cors

cors

// cors 설치
$ npm install cors

/* cors 사용방법 */

// cors import
const cors = require('cors')

// 괄호안에 아무것도 넣지 않을 경우, 어떤 origin이든 데이터를 꺼내갈 수 있다는 뜻.
app.use(cors())

json-server로 만든 서버의 경우엔 모든 도메인을 허용해주는 CORS 규칙이 적용되어있다.
하지만, Open API를 만드는 게 아니라면 모든 도메인을 허용하면 안 됨. 특정 도메인만 허용을 해주어야 한다.

---

2️⃣ 웹팩 개발서버에서 제공하는 Proxy라는 기능 이용

웹팩 개발서버의 프록시를 사용하게 되면, 브라우저 API를 요청할 때 백엔드 서버에 직접적으로 요청을 하지 않고,
현재 개발서버의 주소로 요청을 하게 된다.
그러면 웹팩 개발 서버에서 해당 요청을 받아 그대로 백엔드 서버로 전달하고, 백엔드 서버에서 응답한 내용을 다시 브라우저쪽으로 반환한다.
웹팩 개발서버의 proxy 설정은 원래 웹팩 설정을 통해서 적용을 하지만, CRA를 통해 만든 리액트 프로젝트에서는 package.json 에서 "proxy" 값을 설정하여 쉽게 적용할 수 있다.

 

json-server로 모의 API 서버 같은 json-server를 만들경우에도 Proxy를 이용해서 Cors를 허용할 수 있다.

Proxy 기능을 어떤 식으로 활용해야 하는지 간단하게 확인해보자.

123번째로 적은 todo가 무엇인지 알고 싶다고 가정.
클라이언트 : http://localhost:3000/todo/123
서버 : http://localhost:4000/todo/123

$ npx json-server ./data.json --port 4000

나의 경우에는 port 4000으로 json-server를 열 것이다.

/* package.json에서 proxy 값 설정 */

"proxy": "http://localhost:4000"

package.json에서 해당 값을 설정해주고,

import axios from 'axios';

export const getTodoByNum = async num => {
  const response = await axios.get(`/todo/${num}`);
  return response.data;
};

해당 파일에서 http://localhost:4000/todo 대신에 /todo URL로 요청을 할 경우 주소의 도메인이 생략된 경우, 현재 페이지의 도메인을 가리키게 된다.

다시 말하자면, api 요청할 때 원래 http://localhost:4000/todo/${num} 같은 전체 도메인을 적어줘야 하지만,
요청하는 주소의 도메인이 생략된 경우에는 클라이언트의 현재 페이지 도메인 http://localhost:3000을 가리키게 된다.

해당 프로젝트를 배포하는 경우, 리액트로 만든 서비스와 API가 동일한 도메인에서 제공이 되는 경우에는 위와 같이 계속 진행을 하면 되지만, 만약 API의 도메인과 서비스의 도메인이 다르다면 axios의 글로벌 baseURL을 설정하면 된다.

예를 들어 서비스는 todo.com, API는 today-todo.com이라면 index.js에 다음과 같이 작성하면 된다.

axios.defaults.baseURL = process.env.NODE_ENV === 'development' ? '/' : 'https://today-todo.com/';

위와 같은 설정을 만약 하게 된다면,
개발 환경에선 프록시 서버 쪽으로 요청하고, 프로덕션에선 실제 API 서버로 요청을 하게 된다.

CORS 설정 방법의 2번째인 Proxy라는 기능을 사용하는 것은 필수적인 건 아니지만,
사용하게 되면 백엔드 쪽에서 CORS 설정을 안 해도 되니까 꽤나 유용한 기능이니, 다음에 한번 활용해보면 좋을 것 같다.

[ 출처 : https://react.vlpt.us/redux-middleware/09-cors-and-proxy.html ]