javascript - Chrome、Safari 和 Firefox 上的 CORS POST 请求失败

Question

我有一个在 localhost:8080 上运行的 Spring security 实现的 RESTfull 后端，登录过滤器使用 header 中放置的 token 来响应登录请求，我什至没有为此实现 Endpoint 方法，这一切都是由Spring Security 的魔力在于以下代码行:

  protected void configure(HttpSecurity http) throws Exception {
        // disable caching
        http.headers().cacheControl();

        http.csrf().disable() // disable csrf for our requests.
            .authorizeRequests()
            .antMatchers("/").permitAll()
            .antMatchers("/login").permitAll()
            .anyRequest().authenticated()
            .and()
            // We filter the api/login requests
            .addFilterBefore(new JWTLoginFilter("/login", authenticationManager()), UsernamePasswordAuthenticationFilter.class)
    …

前端是一个 Angularjs Nodejs NPM Bower 项目，在 localhost:8000 上运行静态 http 服务器。在前端，我发出一个简单的 POST 请求，如下所示:

   $scope.login = function () {

    var data = {
        "username":$scope.username,
        "password":$scope.password
    }

    $http({
        url: baseUrl,
        method: "POST",
        data: data
    }).then(function (response) {
        console.log("###### SUCCESS #####");
        var headers = response.headers();
        console.log("headers: "+JSON.stringify(headers));
        var token = headers.authorization.split(" ")[1];
        console.log("token: "+token);
        $http.defaults.headers.common['Authorization'] = token;
        $location.path("/view1");

    }, function (responseData) {
        // called asynchronously if an error occurs
        // or server returns responseData with an error status.
        console.log("###### FAIL #####");
        console.log("Response: "+JSON.stringify(responseData));
        $window.alert("Failed to Login");
    });

这在 IE 中就像一个魅力(也适用于 curl、wget 和 python 请求)，但在 Chrome 和 Safary 上却惨败。我知道那些浏览器会阻止 CORS POST，使得请求一到达后端就为空，事实上，当我从后端注销请求时，我看不到任何数据。我尝试了以下所有可能的组合:

前端:

1) $http(方法: POST)

2) $http.post(

3) 添加标志:Access-Control-Allow-Origin、Access-Control-Expose 等

4) 添加所有可能的 header 组合:'Content–Type':'application/

浏览器端:

1) 使用标志启动 chrome:--disable-web-security

2) 安装 Chrome 扩展 CORS

后端:

1)Spring Security禁用csfr

2)Spring Security 允许所有

3) Spring Security HttpMethod.OPTION

没什么，NHOTING 对我有用!

我缺少什么吗？

还有其他方式发送 POST 请求吗？

编辑

正如所讨论的，我修改了类如下:

网络安全配置:

        .antMatchers("/login").permitAll()
        .anyRequest().authenticated()
        .and()
        // We filter the api/login requests
        .addFilterBefore(new JWTLoginFilter("/login", authenticationManager()), UsernamePasswordAuthenticationFilter.class)
        .addFilterBefore(new CORSFilter(), BasicAuthenticationFilter.class)

并按照建议实现了 CORSFilter。

我还按照建议添加了 WebConfig 类:

@Configuration
@EnableWebMvc
public class WebConfig extends WebMvcConfigurerAdapter {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**").allowedOrigins("http://localhost:8000")
        .allowedMethods("PUT", "POST");
    }
}

由于空字符串，登录过滤器抛出:

com.fasterxml.jackson.databind.JsonMappingException:由于输入结束而没有要映射的内容

这将被拒绝访问的 Spring Security 拦截。

我还尝试将前端服务器移至 8000 之后的其他端口(4200、7000 等)，但没有成功。

Answer 1

您需要在 Spring 中启用 Cors 支持。在您的 WebConfig 中，您可以覆盖 addCorsMappings

@Configuration
@EnableWebMvc
public class WebConfig extends WebMvcConfigurerAdapter {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**").allowedOrigins("http://localhost:4200");  //url of where angular is running.
    }
}

这将为整个应用程序启用 cors。您还可以更具体地设置允许特定 header 和方法的映射。

@Override
public void addCorsMappings(CorsRegistry registry) {
    registry.addMapping("/api/**")
            .allowedOrigins("http://domain2.com")
            .allowedMethods("PUT", "DELETE")
            .allowedHeaders("header1", "header2", "header3");
}

您还可以在类和方法级别允许用户@CrossOrgin

@CrossOrigin(origin = "http://domain2.com",
             maxAge = 3600)
public class ApiController {

}

http://docs.spring.io/spring/docs/current/spring-framework-reference/html/cors.html

https://spring.io/guides/gs/rest-service-cors/