React-Spring CORS 이슈
현재 개인 프로젝트 환경 구축 중에 리액트에서 스프링으로 http 요청시 CORS 문제가 발생했다.
CORS는 Cross-Origin Resource Sharing의 약자이며, 서로 다른 Origin에서 요청을 주고 받을 시 문제가 된다.
여기서 말하는 Origin은Protocol, Host, Port를 의미한다.
예를 들어 나는 현재 React에서 http://localhost:3000 서버를 사용 중이고
Spring은 http://localhost:8080을 사용 중이다.
로컬 테스트 환경이기 때문에 protocol과 host는 동일하지만, port가 달라 CORS 이슈가 발생하는 것이다.
보통 이를 해결하기 위해 react에서 http 요청 시헤더에 Access-Control-Allow-Origin헤더를 포함하면 되지만
근본적 환경설정을 통해 이 문제를 해결해보고자 한다.
react와 spring 모두 설정이 필요하다.
setProxy.js 설정(React)
이번 이슈를 찾아보면서 리액트에서 해결 가능한 방법도 찾아보았는데 가장 흔하게 나오는 것이 proxy 설정이었다.
package.json 파일에 "proxy : http://locahost:8080" 항목을 추가해주면 되는데
적용해도 CORS 이슈가 그대로 터지길래 찾아봤더니 유선 랜 환경에서는 프록시가 제대로 작동을 안하는 듯 했다.
그래서 다음으로 나오는 해결 방법이 http-proxy-middleware 라이브를 활용하는 것이다.
Step 1. 라이브러리 다운
인텔리제이 터미널에 npm i http-proxy-middleware 입력 후 설치
Step 2. src/setProxy.js 파일 생성
const { createProxyMiddleware } = require("http-proxy-middleware");
module.exports = function (app) {
app.use(
createProxyMiddleware("/api", {
target: "http://localhost:8080",
changeOrigin: true,
})
);
};
다음과 같이 설정해주면 /api로 요청을 보낼시에 CORS 이슈 없이 전송이 가능하게끔 세팅이 완료된다.
WebMvcConfig 설정 (Spring)
먼저 com/practice/login/config 경로에 WebMvcConfig 클래스를 하나 추가해 줬다.
addMapping : Exact path mapping URIs (such as "/admin") are supported as well as Ant-style path patterns (such as "/admin/**").
allowedOrigins : Set the origins for which cross-origin requests are allowed from a browser.
allowedMethods : 허용 해줄 http method
위와 같이 설정해주면 CORS 문제가 발생하지 않는다.
2022.12.04
spring에서 WebMvcConfig 설정시 @EnableWebMvc 어노테이션은 제거해준다.
내가 참고한 블로그의 상위 블로그 까지 찾아봤을때 사용하지 않았는데,
앞선 블로그의 작성자와 나의 환경이 뭔가 다른것 같았다.
EnableWebMvc를 사용하면 환경 세팅이 완전히 바뀌어서 사용하지 않는게 나아 보인다.