React 및 Spring Boot CORS 문제 해결: GET 요청 차단

구성 조정을 통해 React + Spring 부팅에서 CORS 오류 해결

접근법 1: 백엔드에서 Spring Boot CORS 구성 사용

// CorsConfig.java
@Configuration
public class CorsConfig implements WebMvcConfigurer {
   @Override
   public void addCorsMappings(CorsRegistry registry) {
      registry.addMapping("/")
              .allowedOrigins("http://localhost:8081")
              .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
              .allowedHeaders("*")
              .allowCredentials(true);
   }
}

React에서 쿠키를 사용한 적절한 CORS 처리를 위해 Axios 사용

접근법 2: Cross-Origin 요청에 대한 React 프런트엔드 Axios 구성

// ProjectPage.tsx
const ProjectsPage = () => {
   const [projectsData, setProjectsData] = useState<ProjectsData[]>([]);
   const projectsUrl = 'http://localhost:8080/api/projects/admin/toinspection';
   useEffect(() => { fetchData(); }, []);
   const fetchData = async () => {
      const token = Cookies.get('token');
      try {
         const response = await axios.get<ProjectsData[]>(projectsUrl, {
            headers: { "Content-Type": "application/json", Authorization: `Bearer ${token}` },
            withCredentials: true
         });
         setProjectsData(response.data);
      } catch (error) {
         console.error("Error fetching projects:", error);
      }
   };
   return (
      <div>
         <AdminPageTemplate type="projects" children=<AdminModContent data={projectsData} />/>
      </div>
   );
};
export default ProjectsPage;

Spring Boot에서 단위 테스트로 CORS 정책 테스트

접근법 3: CORS 정책 검증을 위한 단위 테스트 작성

// CorsTest.java
@RunWith(SpringRunner.class)
@WebMvcTest
public class CorsTest {
   @Autowired
   private MockMvc mockMvc;
   @Test
   public void testCorsHeaders() throws Exception {
      mockMvc.perform(MockMvcRequestBuilders.options("/api/projects/admin/toinspection")
              .header(HttpHeaders.ORIGIN, "http://localhost:8081")
              .header(HttpHeaders.ACCESS_CONTROL_REQUEST_METHOD, "GET"))
              .andExpect(MockMvcResultMatchers.status().isOk())
              .andExpect(MockMvcResultMatchers.header().exists("Access-Control-Allow-Origin"))
              .andExpect(MockMvcResultMatchers.header().string("Access-Control-Allow-Origin", "http://localhost:8081"));
   }
}

React 및 Spring Boot의 CORS에 대해 자주 묻는 질문

1. CORS는 무엇이며 왜 필요한가요?
2. CORS는 교차 출처 요청을 허용하거나 차단하기 위해 브라우저에서 시행하는 보안 메커니즘입니다. 신뢰할 수 있는 원본만 API에 액세스할 수 있도록 하려면 이 정보가 필요합니다.
3. Spring Boot에서 CORS를 어떻게 활성화합니까?
4. Spring Boot에서는 다음을 구성하여 CORS를 활성화할 수 있습니다. @WebMvcConfigurer 인터페이스를 사용하여 허용되는 출처, 메소드 및 헤더를 지정합니다. allowedOrigins 그리고 allowedMethods.
5. 내 요청이 Postman에서는 작동하지만 브라우저에서는 실패하는 이유는 무엇입니까?
6. Postman은 CORS와 같은 브라우저 보안 정책을 우회하지만 브라우저는 이를 엄격하게 시행합니다. 서버가 적절한 CORS 헤더를 브라우저에 보내는지 확인하세요.
7. 비행 전 요청이란 무엇입니까?
8. 실행 전 요청은 자동으로 수행됩니다. OPTIONS 특히 단순하지 않은 HTTP 요청의 경우 서버에서 실제 요청을 허용하는지 확인하기 위해 브라우저에서 보내는 요청입니다.
9. CORS 설정을 어떻게 테스트할 수 있나요?
10. 다음을 사용하여 CORS 구성을 테스트할 수 있습니다. MockMvcRequestBuilders.options() 실행 전 요청을 시뮬레이션하고 서버 응답을 확인하기 위한 단위 테스트에서.

React와 Spring Boot의 CORS에 대한 최종 생각

해결 CORS 오류 React 및 Spring Boot를 사용하는 애플리케이션에서는 브라우저에서 시행하는 보안 정책을 명확하게 이해해야 합니다. Spring Boot 백엔드에서 허용되는 원본과 메서드를 올바르게 구성하면 이러한 문제의 대부분을 예방할 수 있습니다.

또한 요청 시 토큰을 안전하게 처리하고 적절한 헤더가 전송되도록 하면 프런트엔드와 백엔드 시스템 간의 원활한 통신이 보장됩니다. 이 가이드는 개발자가 직면한 일반적인 문제를 해결하고 안전하고 기능적인 교차 출처 요청을 보장하는 데 도움이 됩니다.