AHNDOORI (kAUdo)

포스트맨으로는 잘되던게 실제 브라우저에서는 오류가 발생했습니다.

알아보니까 실제로는 OPTIONS라는 메소드로 먼저 호출을 한다고 하는데,

그 이름이 PREFLIGHT라고 하네요.

그래서 오류가 일반적인 CORS오류가 아니고

blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

라고 적혀있습니다.

Access to fetch at 'https://도메인/엔드포인트' from origin 'https://호출한도메인' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

스프링프레임웤(스프링부트)에서 해결하는 방법

1. 파일중에 WebSecurityConfigurerAdapter를 상속받은 클래스를 찾는다.

2. 오버라이드 된 configure(HttpSecurity http)메소드를 편집한다. (없으면 만듦)

@Override
protected void configure(HttpSecurity http) throws Exception {

3. http에 코드 추가

.cors().and()
.requestMatchers(CorsUtils::isPreFlightRequest).permitAll()

* 리액트프론트용 자바스크립트 코드

브라우저에 붙여서 테스트

var Data = {
  METHOD : {
    GET : 'GET',
    POST : 'POST',
    PUT : 'PUT',
    DELETE : 'DELETE'
  },
  TYPE : {
    FILE_UPLOAD : 'Data.TYPE.FILE_UPLOAD'
  },
  load : ( option ) => {
    const accessToken = localStorage.getItem('access.token');
    let parameters = {
      headers : { Authorization : accessToken ? `Bearer ${ accessToken }` : '' },
      method : option.method || Data.METHOD.GET
    };
    switch ( option.method ) {
      case Data.METHOD.POST :
      case Data.METHOD.PUT :
        option.type !== Data.TYPE.FILE_UPLOAD && ( parameters = { ...parameters, headers : { 'Content-Type' : 'application/json' } } );
        break;
      default :
    }
    if ( option.data ) {
      let data;
      if ( option.type === Data.TYPE.FILE_UPLOAD ) {
        data = new FormData();
        for ( let i in option.data ) {
          data.append( i, option.data[ i ] );
        }
      } else {
        data = JSON.stringify( option.data );
      }
      parameters = { ...parameters, body : data };
    }
    window.fetch( option.url, parameters )
      .then( response => response.json() )
      .then(
        ( data ) => {
          if ( data.code === 'S000000' ) {
            option.success && option.success( data.data );
          } else if ( data.hwrErrorCode?.code === 'ERR_SUCCESS' ) {
            option.success && option.success( data.candidates[ 0 ] )
          } else {
            option.error && option.error( data );
          }
        }
      );
  }
};
Data.load({url:'http://localhost/주소'});