반응형
Spring boot 와 React 프로젝트를 처음 생성하고 간단하게 동작 확인을 하려고
서버에서 RestController 와 React 에서 axios 로 부르려고 시도를 했는데, 다음과 같은 오류가 발생했습니다.
React 코드는 다음과 같습니다.
import './App.css';
import { useState, useEffect} from 'react';
import axios from 'axios';
function App() {
const url = 'http://localhost:8080/';
const [data, setData] = useState('');
useEffect(() => {
(async () => {
try {
const { data } = await axios.get(url);
setData(data);
} catch (error) {
alert(error);
}
})();
}, []);
return (
<div className="App">
{ data }
</div>
);
}
export default App;
Access to XMLHttpRequest at 'http://localhost:8080/' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Failed to load resource: net::ERR_FAILED
CORS 에러 해결을 위해 서버, 프론트에서 각각 해결 할 수 있는 방법이 있지만 나는 서버에서 해결을 하기로 했습니다.
package com.junam.my_bucket_server.config;
import lombok.RequiredArgsConstructor;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@RequiredArgsConstructor
@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("http://localhost:3000")
.allowedMethods("OPTIONS", "GET", "POST", "PUT", "DELETE");
}
}
뜻은 모든 url 에 대해서 http://localhost:3000 에 다음과 같은 Method 를 가진 요청이 오면 권한을 주겠다는 말 입니다.
설정 후 서버 재시작을 해보니 정상적으로 요청이 들어왔습니다!
반응형