[React] CORS 이슈 , Proxy 설정하기

client 와 server 가 사용하는 포트가 다를때 Cross-Origin Resource Sharing 즉, CORS 이슈가 발생한다.

Cross-Origin Resource Sharing (CORS)

Cross 는 정보의 이동을 뜻하고

Origin 은 client와 server 각각을 의미한다.

Resource 는 말그대로 자원 즉, 데이터를 말하며

Sharing 은 공유를 말한다.

즉, client와  server 간의 데이터 공유에 있어서 발생하는 보안 문제점에 관한 정책이다.

한국어로 교차 출처 리소스 공유라고 하며 교차 출처 자원 공유는 최초 자원이 서비스된 도메인 밖의 다른 도메인으로부터 요청할 수 있게 허용하는 구조이다.

특정한 도메인간의 요청 특히 Ajax 요청은 동일-출처 보안 정책에 의해 기본적으로 금지된다.

예시를 들어보면 

1)

Web Docment    -------------------------> Web Server

(domain-a.com)                                               (domain-a.com)

둘은 Same-origin requests이기 때문에 항상 허용되지만

2)

Web Docment    -------------------------> Web Server

(domain-a.com)                                               (domain-b.com)

둘은 Cross-origin requests이기 때문에 CORS 정책에 의해 컨트롤 된다.

나의 경우 프로젝트를 할때 

client 쪽은 리액트를 사용하여 3000번 포트를 사용하고 있었고

server 쪽은 nodejs 를 사용하여 구성했는데 5000번 포트를 사용하고 있어서

client 쪽에서 요청을 보내더라도 server와의 포트가 다르기 때문에 요청에 대한 응답을 제대로 받을 수 없었다.

해결방법으로 http-proxy-middleware 모듈을 사용했다.

모듈을 설치하고

$ npm install http-proxy-middleware --save

src 디렉터리에 setupProxy.js 파일을 만들어

해당파일안에 아래와 같이 작성하면 둘의 포트번호가 다르더라도  client와  server 통신이 제대로 이루어진다.

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function (app) {

app.use(

// 경로명

'/api/hello',

createProxyMiddleware({

// 프론트는 3000번 포트 백엔드는 5000번 포트

// 요청하고자 하는 주소를 설정

target: 'http://localhost:5000',

changeOrigin: true,

})

);

};

참고 문서

https://create-react-app.dev/docs/proxying-api-requests-in-development/

따로 미들웨어를 설치하지 않고 client 사이드의 package.json 파일에 

"proxy": "http://localhost:5000" 를 추가하는 방식으로도 서버와 통신이 가능하다.

{

"name": "client",

"version": "0.1.0",

"private": true,

"proxy": "http://localhost:5000",

"dependencies": {

"@testing-library/jest-dom": "^5.11.4",

"@testing-library/react": "^11.1.0",

"@testing-library/user-event": "^12.1.10",

"axios": "^0.21.0",

"http-proxy-middleware": "^1.0.6",

"react": "^17.0.1",

"react-dom": "^17.0.1",

"react-router-dom": "^5.2.0",

"react-scripts": "4.0.0",

"web-vitals": "^0.2.4"

},

package.json 파일에 4번째 줄에 작성했다. 첫번째 줄에 작성해도 어디에 작성해도 상관없다. 그러나 dependencies에 작성하면 안된다.