리액트 + 스프링부트api 요청시 cors 오류

 

참고 블로그 : https://www.datoybi.com/http-proxy-middleware/

SOP?

자바스크립트 엔진 표준 스펙의 보안 규칙 중, 하나의 출처(Origin)에서 로드된 자원(문서나 스크립트)이 일치하지 않는 자원과 상호작용 하지 못하도록 요청 발생을 제한하는 정책이 있습니다. 그것이 바로 SOP (Same Origin Policy, 동일 출처 정책)입니다.

즉, http://localhost:8000와 http://localhost:8000/posts는 같은 출처라서 상호작용이 가능한데, http://google.com에서 http://localhost:8000를 호출하면 SOP에 위배됩니다. 그렇다면 동일한 출처의 기준은 무엇일까요?

 

동일 출처의 기준

 http://example.com:8042/over/there?name=ferret&page=1#nose
 \__/  \__________/\___/ \________/ \________________/\___/
   |         |       |       |               |          |
protocol    host    port    path       query string  Fragment

protocol, host, port가 같아야 동일한 출처 입니다.

 

---

 

위의 내용처럼 현재 react에서 axios를 통해 api를 요청 하는 중에 오류가 났다. 이유는 localhost:3000에서 localhost:8080으로 데이터 요청을 하는 이유로 브라우저에서 보안상 요청발생을 제한한다. 그러므로 같은 도메인으로 일치시키거나 프록시를 이용하여 요청할 때에 localhost:8080을 동일한 도메인,포트로 변경하는 방식으로 사용해야 한다.

 

요청하면 부트의 api컨트롤러에 도착은 하지만 리턴할 때에 오류가 나는 상황이다.

 

블로그마다 여러 방식으로 해당 오류를 잡지만 나는 

http-proxy-middleware 를 통해 오류를 잡았다.

 

터미널에서 install 한다

npm install http-proxy-middleware

 

src에 setupProxy.js를 만들어 준다.

 

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

module.exports = function(app){
  app.use(
    createProxyMiddleware('/api', {
      target: 'http://localhost:8080',
      pathRewrite: {
        '^/api':''
      },
      changeOrigin: true
    })
  )
  
};

 

middleware로 잡을 때 이름을 /api로 잡는다. 그럼 /api/main을 입력할 경우 localhost:8080/main을 호출하게 되며 값을 받아오게 된다.