[Node.js] CORS 해결하기 (node에서 cors로, react에서 proxy)

Rest 서버를 작성하게 되면 필연적으로 API서버를 만들면서 react에서 어떤 방식으로든 데이터를 주고 받는 과정이 생기게 된다.

이 과정에서 CORS 에러라는게 발생하게 되는데.. 내 경우 spring-boot + react를 처음 연동해보면서 알게 되었다. (처음엔 뭐가 잘못된건줄 알았음)

출처 블로그에 자세히 적혀있는데 다른 도메인으로 요청을 보내게 되면 Cross Origin Resource Sharing (CORS)로 요청을 보내게 된다는 것. 이를 보안의 이유로 브라우저에서 제한한다고 한다 (??)

그리하여 필연적으로 cross origin으로 요청을 받게 되는 api서버의 응답헤더에서 Cross Origin 요청도 Same Origin으로 (내 도메인에서 요청한 것)처럼 풀어준 다는 것이다.

블로그에선 여러 방법을 제시하는데 그중에서 가장 간단한 방법은.. npm에 cors를 설치하고 express에서 use처리만 해주면 된다.

사용 방법은 npm cors 공식 예제에도 똑같이 나와있다. 

그리고 추가적으로 React에서 Proxy를 설정해주면 당장은 개발하는데 큰 문제는 없을 것이라 두가지를 서술하였다.

Node에서 cors를 설치하여 처리하는 방법

그외에 MDN에서 CORS에 대해 자세히 설명한 페이지도 같이 첨부

$ npm install cors

var express = require('express')
var cors = require('cors')
var app = express()
 
app.use(cors())
 
app.get('/products/:id', function (req, res, next) {
  res.json({msg: 'This is CORS-enabled for all origins!'})
})
 
app.listen(80, function () {
  console.log('CORS-enabled web server listening on port 80')

React에서 프록시를 처리하는 방법

이 방법은 아마도 서버를 배포하고 live 한다면 꼭 해야하는 과정일듯하고.. 내부에서 react와 연동해서 간단하게 해결하는 방법은 proxy 를 사용하는 것이다.

프록시는 일종에 포워딩을 칭하는 용어중 하나인데. 쉽게 말하면 나 자신을 통해 다른곳에 우회적으로 접속하게 만드는 것이다.

react포트가 1000이고 node 포트가 2000이라고 가정할 때 package.json 에 다음과 같이 적어주면 된다.

우리가 눈여겨 볼 부분은 가장 아래줄  "proxy": "http://localhost:2000/" 부분이다. react를 기준으로 2000포트인 node 서버를 프록시로 지정해주면 된다.

이런식으로 설정해주고 fetch로 서버에 요청을 보낼때는      fetch('/users')    이런식으로 로컬에 요청을 보내듯이 하면 된다.

참고 출처: 

http://guswnsxodlf.github.io/enable-CORS-on-express

https://www.npmjs.com/package/cors

https://developer.mozilla.org/ko/docs/Web/HTTP/Access_control_CORS