Spring & React 결합 (버그와 오류들)

버그...그리고 오류들..

 

일단 크게 2가지 오류들이 있었습니다.

1. CORS, Same-Origin-Policy 문제

2. React V6 버전 문제

 

 

• redirect is not allowed for a preflight request
• 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. 

정도의 오류가 있었습니다.

일단 맨 마지막 문제같은 경우에는 @CrossOrigin이라는 어노테이션이 있지만

CORS 문제를 겪지않도록 하는 컨트롤러 클래스마다 달아야 의미가 있기에

이는 굉장히 귀찮을 것을 염려하여

WebConfig이라는 클래스를 하나따로 만들어 같은 효과, 모든 곳에 적용시켰습니다.

package com.example.reactspring.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:3000")
                .exposedHeaders("X-AUTH-TOKEN");

    }
}

addMapping()으로 특정한 영역을 잡아줄 수 도 있지만, 전체를 했습니다.

그리고 allowedOrigins()으로 허락해줄 호스트에 대해서 설정합니다.

exposedHeaders는 JWT 토큰을 서버에서 제공해주면 이를 React가 받아먹어야하는 데 이를 null로 알아먹어서

이를 해결하고자 추가하였습니다.

exposedHeaders는 화면에서 지정해주는 해더값을 읽을 수 있도록 해줍니다.

 

 

위 문제들은 그나마 간단한 문제들이기에 금방 해결할 수 있었지만

실질적인 문제는 redirect is not allowed for a preflight request 문제가 아닐까 싶습니다.

이 친구는 에러가 발생할 때 위 오류 메시지 역시 같이 뱉어냅니다.

이런 문제가 발생하는 이유는 Same-Origin-Policy(동일 출처 정책) 때문인데

대충 이게 무슨 문제인지 짤막하게 설명하자면

동일 호스트에서 호출한 것들만 받겠다는 정책인데...

이런게 뭐가 문제인건데 싶어서 예시를 간단하게 들자면

React서버에서 Spring Rest API로 호출하면 당연하게도 동작할리가 없습니다.

더 쉽게 설명하자면

동일 출처 정책이 교칙으로 하는 학교가 있다고 가정하고,

A반 소속 학생들은 A반끼리만 서로의 물건을 사용할 수 있고

B반 역시 이는 동일하다.

그런데 A반 학생이 B반 학생 물건을 내 맘대로 쓰겠다고 하면

이는 동일 출처 정책에 위반이 됩니다.

 

해결하는 방안은 단순합니다. CORS 방식을 사용하면 됩니다.

"proxy": "http://localhost:8080",

CORS 방식을 사용하여 GET를 하는 방법 중 가장 쉬운 방법이 아닌가 싶습니다.

그래서 마지막 Home.js에는 다른 request.js 들과 다르게 포트가 3000입니다.

 

 

그리고 

React V6 버전 문제인데

V6가 되면서 사라진 것들 때문입니다.

일단 withRouter 가 사라졌고...

https://reactrouter.com/docs/en/v6/faq

그리고

switch가 routes로 이름이 바뀌었다.

 

그래서 withRouter이 사라지면서 대체 가능한 것들로 시도를 해보았지만

마땅한 결과가 생기지 않아 지금과 같은 결과가 나타났다.

지금은 axios, React, useState만 import해서 사용했습니다.

 

 

이상입니다.