>

기본 인증을 사용하여 보안이 설정된 서버 API를 사용하여 가져 오는 이미지를 표시하려고하는데 이미지를 뷰에로드하는 중에 오류가 발생합니다.

<head>
<script>
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://myurl.com", true);
xhr.withCredentials = true;
xhr.setRequestHeader("Authorization", 'Basic ' + btoa('test:test123'));
xhr.onload = function () {
console.log(xhr.responseText);
};
xhr.send();
</script>
</head>

<div id="image" style="width: 430px; height: 430px;"></div>
 and i am getting below error.
 Response for preflight is invalid (redirect)


  • 답변 # 1

    브라우저는 초기 요청이 완료되기 전에 서버에 OPTIONS 호출을 보냅니다. 이 통화/종료 점이 존재하고 이와 같은 여러 가지가 있으면이 통화를 수행 할 수 있는지 확인합니다.

    또한 확인 : https://www.html5rocks.com/static/images/cors_server_flowchart.png

    Spring Boot를 사용하는 경우 CORS 구성에서 OPTIONS 호출을 허용해야합니다. 예 :

    @EnableWebSecurity
    @Configuration
    public class WebSecurityConfig extends WebSecurityConfigurerAdapter {
      @Override
      protected void configure(HttpSecurity http) throws Exception {
        http
            .httpBasic()
        .and()
            .cors().configurationSource(corsConfigurationSource())
            .and()
            .csrf().disable()
        .authorizeRequests()
            .antMatchers(HttpMethod.OPTIONS).permitAll() // allow CORS option calls 
            .antMatchers("/**").permitAll();
      }
      @Bean
      CorsConfigurationSource corsConfigurationSource() {
        CorsConfiguration configuration = new CorsConfiguration();
        configuration.setAllowedOrigins(Arrays.asList("*"));
        configuration.setAllowedMethods(Arrays.asList("*"));
        configuration.setAllowedHeaders(Arrays.asList("*"));
        configuration.setAllowCredentials(true);
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", configuration);
        return source;
      }
    }
    
    

관련 자료

  • 이전 google geocoding api - zip_code는 위치를 부정확하게 만듭니다
  • 다음 자식 - webrtc : "참조는 나무가 아닙니다"하지만 ui에서 커밋을 볼 수 있습니다