Question

当我尝试在Angular 6中使用HttpClient进行后端API的POST操作时出现此错误。我收到此错误：“缺少CORS标头'Access-Control-Allow-Origin'。

我的临时解决方案是在Google Chrome浏览器上安装CORS扩展程序。

解决此问题的最佳解决方案是什么？

谢谢。

Answer 1

您需要启用后端服务以接受来自angular 6网站的请求。这个东西叫做CORS (Cross-origin resource sharing)。默认情况下，您的网站网址为http://localhost:4200

执行此操作的方法取决于您用于开发后端服务的语言/框架。

这里是SpringBoot中配置CORS的示例。它仅出于开发目的，您应限制访问量，将通配符转换为所需的数据（例如，您的url，如前所述）。

@Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration config = new CorsConfiguration();
        config.setAllowCredentials(true);
        config.addAllowedOrigin("*");
        config.addAllowedHeader("*");
        config.addAllowedMethod("OPTIONS");
        config.addAllowedMethod("GET");
        config.addAllowedMethod("POST");
        config.addAllowedMethod("PUT");
        config.addAllowedMethod("DELETE");
        source.registerCorsConfiguration("/**", config);
        return new CorsFilter(source);
    }




@Override
    protected void configure(HttpSecurity httpSecurity) throws Exception {
        httpSecurity
                // we don't need CSRF because our token is invulnerable
                .csrf().disable()

                // TODO adjust CORS management
                .cors().and()

                .exceptionHandling().authenticationEntryPoint(unauthorizedHandler).and()

                // don't create session
                .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS).and()

                .authorizeRequests()

                .antMatchers("/auth/**").permitAll()
                .anyRequest().authenticated();

        // Custom JWT based security filter
        JwtAuthorizationTokenFilter authenticationTokenFilter = new JwtAuthorizationTokenFilter(userDetailsService(), jwtTokenUtil, tokenHeader);
        httpSecurity
                .addFilterBefore(authenticationTokenFilter, UsernamePasswordAuthenticationFilter.class);
    }

缺少CORS标头“ Access-Control-Allow-Origin”。发布到API时

1 个答案: