React CORS 처리

교차 출처 리소스 공유(Cross-Origin Resource Sharing)은 한 출처에서 실행 중인 웹 application이 다른 출처의 자원에 접근할 수 있는 권한을 추가 http 헤더를 이용하여 알려주는 체제이다.
XMLHttpRequest 와 Fetch API는 동일 출처 정책을 따르기에 이부분을 염두해두어야한다.

 

해결방법.

중간에 프록시서버를 두면 되지만 react는 간단하게 해결이 가능하다.

package.json에

"proxy" : "http://~"

를 적용시키고 해당 url을 사용하는 fetch api에서 url의 호스트를 지워준뒤 사용하면 된다.

"http://~/test" -> "/test"

 

만약 여러 경로를 사용해야 하는 경우.

npm install http-proxy-middleware

 

한뒤 src 아래에 setupProxy.js를 생성한다.

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

module.exports = function(app){
  app.use(
    createProxyMiddleware('/naver', {
      target: 'https://naver.com',
      pathRewrite: {
        '^/naver':''
      },
      changeOrigin: true
    })
  )
  
  app.use(
    createProxyMiddleware('/test', {
      target: 'https://test.org',
      pathRewrite: {
        '^/test':''
      },
      changeOrigin: true
    })
  )
};

 

이러면 naver/~ 혹은 test/~를 알아서 인식하여 프록시 처리를 해준다.

naver, test는 지워지고 target 링크로 변경되어야 함으로 pathRewrite에 지워야 하는 문자열을 적어준다.