[ERROR] CORS React (CRA) + JAVA 11

🥕 서버 쪽 포트는 8080 / front 쪽 포트는 3000을 쓰고 있다.

 

😢 back : springboot java 11

🤢 front : react node 

 

 

 

 

 

 

8080 서버로 API 요청시 요청값은 다음과 같이 온다.

 

 

back단의 response header에 Access-Control-Allow-Origin 설정을 한다면,

모든 요청 response에 header를 설정해야 한다. 

 

 

 

 

 

로컬환경에서는 처리하지만,

소프 배포이후에는 nginx 나 apache의 proxy 설정이  필요하다.

 

 

---

🤨 클라이언트쪽의 proxy 설정을 통해 해결 할 경우 다음과 같다.

 

1.   미들웨어 설치로 설정 

 

   $ npm install http-proxy-middleware --save

   $ yarn add http-proxy-middleware

 

 

설정은 공식 문서를 참고한다. 

https://create-react-app.dev/docs/proxying-api-requests-in-development/#configuring-the-proxy-manually

Proxying API Requests in Development | Create React App

 

src/setupProxy.js

 

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

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

 

API 요청 경로에 /api 를 사용한 다면 http://localhost:8080 호스트로 요청 전달된다.

 

back 단에서 인증키만 넘어오면 home으로 이동하도록 간단히 구현해보았다.

 

 

    defaultAxios.post("walk/login",
        {
            // email:data.get(`email`),
            email:data.get(`email`),
            password:data.get(`password`)
        },
        {headers: { "Content-Type": `application/json`}})
        .then(response => {
            console.log(response," 헤더값 : ",response.headers.authrozation);

            if (response.headers.authrozation !==null) {
                document.location.href = '/home'
            }
        }).catch( err =>{
            console.log("ERROR: ", err)
    });

 

 

 

로그인 시 다음과 같다.

 

 

 

 

 

 

---

2. package.json 설정.

 

간단하다는 장점이있다. 

 

** CRA( create-react-app ) 을 이용한 리액트 어플리케이션을 만든 경우 + 0.2.3 버전 이상인 경우 사용

** 프록시 설정이 전역으로 적용된다. 

** react dev server 가 response를 browser에 전달하지만, websocket 요청의 protocol이 http로 바뀐다는 문제가 있다.

 

package.json
}
   ・・・・
   "proxy": "http://localhost:8080"
}