Spring-boot / Http call angular 2的角度没有'Access-Control-Allow-Origin' [重复]

Question

我正在尝试将数据从 spring boot server 获取到 angular 应用程序 通过 angular http 调用。我还为 Spring Boot 应用程序添加了 security 依赖项。

当我尝试使用浏览器时，它会出现。

一旦我在 Intellij 的控制台中输入密码，它就会显示响应。

当我尝试使用 angular http 调用时，它会失败并显示错误 主题。

我的角度组件有以下代码。

constructor(private http: HttpClient) { 
    http.get('http://localhost:8080/resource').subscribe(data => this.greeting = data);
}

我的 Spring Boot 应用程序有以下代码

@RequestMapping("/resource")
public Map<String,Object> home() {
      Map<String,Object> model = new HashMap<String,Object>();
      model.put("id", UUID.randomUUID().toString());
      model.put("content", "Hello World");
      return model;
}

我也读过跨域资源共享（CORS），但不清楚如何将这些应用到角度。

我的错误是：

Answer 1

检查服务器是否也接受http方法'OPTIONS'。因为如果域不同，浏览器默认发送 OPTIONS 请求，响应应该是成功 200。如果它是一个弹簧后端

public class CorsFilter implements Filter {

@Override
public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
    final HttpServletResponse response = (HttpServletResponse) res;
    response.setHeader("Access-Control-Allow-Origin", "*");
    response.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, OPTIONS, DELETE");
    if ("OPTIONS".equalsIgnoreCase(((HttpServletRequest) req).getMethod())) {
        response.setStatus(HttpServletResponse.SC_OK);
    } else {
        chain.doFilter(req, res);
    }
}

Answer 2

控制器中的每个方法都需要单独允许跨域。只需在方法顶部添加 @CrossOrigin(origins = "*")，希望这能解决问题。

@CrossOrigin(origins = "*")
@RequestMapping("/resource")
    public Map<String,Object> home() {
        Map<String,Object> model = new HashMap<String,Object>();
        model.put("id", UUID.randomUUID().toString());
        model.put("content", "Hello World");
        return model;
}

Answer 3

在 scala + spring boot 中可以添加 cors 映射

class WebAppConfig extends WebMvcAutoConfigurationAdapter {

  @Value("${cors.origin}")
  private val corsOrigin: String = "all"

  override def addCorsMappings(registry: CorsRegistry): Unit = {
    if(corsOrigin=="all"){
      registry.addMapping("/**")
    }else{
      registry.addMapping("/**").allowedOrigins(corsOrigin.split(","):_*)
    }
  }

}

Answer 4

我在角度应用程序中所做的事情是正确的，必须纠正 仅限我的 Spring Boot 应用程序。

我所做的唯一更改是创建名为 WebSecurityConfig.

的配置文件

@EnableWebSecurity
@Configuration
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.cors();
    }

    @Bean
    CorsConfigurationSource corsConfigurationSource() {
        UrlBasedCorsConfigurationSource source = new
                UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", new CorsConfiguration().applyPermitDefaultValues());
        return source;
    }
}