source

로컬 React 프론트엔드를 로컬 Spring Boot 미들웨어 응용 프로그램에 연결할 때 CORS 오류가 발생했습니다.

ittop 2023. 7. 21. 21:58
반응형

로컬 React 프론트엔드를 로컬 Spring Boot 미들웨어 응용 프로그램에 연결할 때 CORS 오류가 발생했습니다.

저는 React에서 스프링 부트로 작성된 미들웨어 서비스에 연결되는 프론트엔드 애플리케이션을 작업하고 있습니다.프런트 엔드에서 다음과 같이 엔드포인트를 호출하려고 합니다.

return axios.post('http://localhost:8085/workshop/client/createClient', {username})
.then((response) => {
  console.log('Success')
})
.catch((error) => console.log(error));

브라우저에서 요청할 때마다 다음 오류가 발생합니다.

OPTIONS http://localhost:8085/workshop/client/createClient 401 ()

Failed to load http://localhost:8085/workshop/client/createClient: Response for preflight has invalid HTTP status code 401.

제가 알기로는 비행 전 요청이 제 미들웨어 애플리케이션에 의해 차단되고 있기 때문입니다.온라인에서 이 기능을 활성화하는 방법에 대해 조금 읽은 후 봄 부팅 애플리케이션에 CorsFilter를 추가했습니다.

@Slf4j
public class CORSFilter implements Filter {
  private static final String ONE_HOUR = "3600";

  @Override
  public void init(FilterConfig filterConfig) throws ServletException {
  }

  @Override
  public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
    HttpServletResponse response = (HttpServletResponse) res;
    response.setHeader("Access-Control-Allow-Origin", "*");
    response.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, OPTIONS, DELETE");
    response.setHeader("Access-Control-Max-Age", ONE_HOUR);
    response.setHeader("Access-Control-Allow-Headers", "X-Requested-With,Origin,Content-Type, Accept, x-device-user-agent, Content-Type");

    if (req instanceof HttpServletRequest) {
       HttpServletRequest httpServletRequest = (HttpServletRequest) req;
       if (httpServletRequest.getHeader(HttpHeaders.ORIGIN) != null
          && httpServletRequest.getMethod().equals(HttpMethod.OPTIONS.name())
          && httpServletRequest.getHeader(HttpHeaders.ACCESS_CONTROL_REQUEST_METHOD) != null) {
          log.debug("Received an OPTIONS pre-flight request.");
          return;
       }
    }
    chain.doFilter(req, res);
  }

  @Override
  public void destroy() {
  }
}

그리고.

@Configuration
public class MvcConfiguration {

 @Bean
 public FilterRegistrationBean corsFilter() {
   FilterRegistrationBean filterRegistrationBean = new FilterRegistrationBean();
   filterRegistrationBean.setFilter(new CORSFilter());
   filterRegistrationBean.addUrlPatterns("/*");
   filterRegistrationBean.setOrder(0);
   return filterRegistrationBean;
 }
}

다음은 엔드포인트의 예입니다.

 @PostMapping("/createClient")
 public ResponseEntity<?> createClient(@RequestBody CreateClientDto clientDto) {
    try {
     ...
     return new ResponseEntity<>(responseBody, OK);
    } catch (Exception e ...) {}
  }

어떤 도움이라도 주시면 감사하겠습니다 :)

업데이트: 요청에 대한 URL을 약간 잘못 알고 있었습니다(이후 404).오류 메시지를 업데이트했습니다.저는 아직도 CORS 문제가 있는 것 같습니다.

개발 도구에서 볼 수 있는 응답 헤더는 다음과 같습니다.

Access-Control-Allow-Credentials:true
Access-Control-Allow-Headers:access-control-allow-credentials, access-control-allow-methods, access-control-allow-origin, allow, content-type
Access-Control-Allow-Methods:POST
Access-Control-Allow-Origin:http://localhost:3000
Allow:GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS, PATCH
Cache-Control:no-cache, no-store, max-age=0, must-revalidate
Content-Length:0
Date:Thu, 01 Mar 2018 14:06:38 GMT
Expires:0
Pragma:no-cache
Strict-Transport-Security:max-age=31536000 ; includeSubDomains
Vary:Origin
WWW-Authenticate:Basic realm="Spring"
X-Content-Type-Options:nosniff
X-Frame-Options:DENY
X-XSS-Protection:1; mode=block

요청 헤더:

OPTIONS /workshop/client/createClient HTTP/1.1
Host: localhost:8085
Connection: keep-alive
Access-Control-Request-Method: POST
Origin: http://localhost:3000
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) 
AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.186 Safari/537.36
Access-Control-Request-Headers: access-control-allow-credentials,access-control-allow-methods,access-control-allow-origin,allow,content-type
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-GB,en;q=0.9,en-US;q=0.8,da;q=0.7

저도 이 문제가 있었지만, 좀 더 간단한 의사소통 방식으로 직설적인 답변을 드리겠습니다.

우선 서버(Spring boot java)에 클라이언트(Reactjs) URL을 알려주셔야 합니다.

예를 들어, 대부분의 경우 봄 부츠는http://localhost:8080및 Reactjsuses http://localhost:3000.

따라서 Spring boot java의 컨트롤러로 이동하여 Reactjs의 URL에 서버 접근 권한을 부여해야 합니다(Spring boot).이것은 당신이 CORS 문제를 해결하는 데 도움이 될 것입니다.

Spring boot에서는 어떻게 합니까?간단히 우리는 추가합니다.@CrossOrigin아래와 같이 Reactjs URL 링크를 지정하는 주석:

예:

    @GetMapping("/orphans")
    @CrossOrigin(origins = "http://localhost:3000")
    Iterable<Student> read() {
        return studentService.findAll();
    }

위의 방법은 고아들을 모두 나열하는 것이기 때문에 Reactjs URL 링크 허가를 준 후 CORS 문제를 제거했습니다.

해피 코딩.

Controller.java

이 문제를 해결하려면 아래 샘플 코드를 참조하십시오.

@CrossOrigin(origins = "http://localhost:3000")
@RequestMapping(value="/sample", method = RequestMethod.GET, produces = "application/json")

public Student getStudent(){
}

가져오기에서 코드 행 아래에 추가

  export function getData(endpoint = '/', request = {}) {
    let url = endpoint;
    let req = Object.assign(
      {
        headers: {
          Accept: 'application/json',
          'Content-Type': 'application/json',
          'Access-Control-Allow-Origin': '*',
        },
      },
      request
    );
    console.log('url,req', url, req);
    return fetch(url, req).then(handleResponse).catch(handleErrors);
  }

Rest Controller 클래스 아래 줄에 추가

@RestController
@CrossOrigin(origins = "*", allowedHeaders = "*")
class TestController{}

이것이 도움이 되기를 바랍니다 :)

이것은 표준 CORS 문제이며, 기본적으로 사용자 에이전트를 의미합니다.http://localhost:3000리소스에 액세스할 수 있는 사용 권한이 없습니다.http://localhost:8085여러분은 https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS 에서 그것에 대해 더 배울 수 있습니다.

요청 헤더는 서버 규칙에 정확히 매핑되어야 합니다.매개 변수를 다음과 같이 유지*작동하지 않습니다.

예를 들어, 요청 헤더에 다음이 있는 경우:

Access-Control-Request-Method: POST
Access-Control-Request-Headers: <your custom headers>

그런 다음 서버 규칙은 요청 헤더 맵을 표시합니다.

Access-Control-Request-Method: GET, PUT, DELETE, POST
Access-Control-Request-Headers: <your custom headers>

도움이 된다면 알려주세요!

문제가 해결된 것 같습니다.Accept request 헤더(감사합니다 @Anadi Sharma)를 놓쳤고, spring-boot-starter-security도 종속성으로 가지고 있었는데, 이는 무단으로 반환되는 것 같았습니다.저는 또한 CorsFilter가 필요하지 않았고, 결국 저는 엔드포인트에서 @CrossOrigin 주석을 사용했습니다.

서버측(스프링부트앱)에 bone 구성을 추가하여 origin을 허용함으로써 해결할 수 있었습니다.

@SpringBootApplication
public class MyApplication {

    public static void main(String[] args) {
        SpringApplication.run(MyApplication.class, args);
    }

    @Bean
    public WebMvcConfigurer configure() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry reg) {
                reg.addMapping("/**").allowedOrigins("*");
            }
        };
    }

}

언급URL : https://stackoverflow.com/questions/49049312/cors-error-when-connecting-local-react-frontend-to-local-spring-boot-middleware

반응형

'source' 카테고리의 다른 글

인스턴스 메서드의 장식자가 클래스에 액세스할 수 있습니까?  (0) 2023.07.21
Python에서 가상 환경의 이름을 변경하는 방법은 무엇입니까?  (0) 2023.07.21
심층 학습 난 손실 이유  (0) 2023.07.21
@SpringBoot 앱에서 RabbitListener 메서드 테스트  (0) 2023.07.21
갑자기 멈추는 파이썬으로 거대한 CSV를 처리할 때 '킬드'는 무엇을 의미합니까?  (0) 2023.07.21

'source'의 다른글

  • 현재글로컬 React 프론트엔드를 로컬 Spring Boot 미들웨어 응용 프로그램에 연결할 때 CORS 오류가 발생했습니다.

관련글

댓글

티스토리툴바