Angular 2/4 和 Jersey REST CORS 问题

Angular 2/4 and Jersey REST CORS issue

我一直在尝试在后端使用 angular 和 jersey REST 构建相对简单的应用程序。我已经设法在两者之间进行了一些交流,但是当我尝试按照此答案 Best practice for REST token-based authentication with JAX-RS and Jersey 来实现安全性时,我得到了一些奇怪的行为。

当我尝试从 Angular 应用程序 (localhost:4200) 发出 POST 请求时,我得到 403 Forbidden(对预检请求的响应未通过访问控制检查)甚至没有执行 ContainerRequestFilter或 ContainerResponseFilter。

当我用 POSTMAN 发送完全相同的请求时,一切正常。每个过滤器都被调用并且身份验证工作正常。

这是我的 类:

@Provider
public class CorsFilter implements ContainerResponseFilter {

@Override
public void filter(ContainerRequestContext request,
        ContainerResponseContext response) throws IOException {

    System.out.println("cors");
    response.getHeaders().add("Access-Control-Allow-Origin", "*");
    response.getHeaders().add("Access-Control-Allow-Headers",
            "origin, content-type, accept, authorization");
    response.getHeaders().add("Access-Control-Allow-Credentials", "true");
    response.getHeaders().add("Access-Control-Allow-Methods",
            "GET, POST, PUT, DELETE, OPTIONS, HEAD");
    System.out.println(response.getHeaders());
}

休息

@Path("/like")
@POST
@Secured({User.RoleEnum.ADMIN,User.RoleEnum.MODERATOR,User.RoleEnum.SUBSCRIBER})
@Consumes(MediaType.APPLICATION_JSON)
@Produces(MediaType.APPLICATION_JSON)
public Response like(Comment toUpdate){
    System.out.println("like");
    Comment updated = null;
    try {
        updated = commentService.like(toUpdate);
    } catch (IOException e) {
        // TODO Auto-generated catch block
        return Response
                .serverError()
                .build();
    }
    if(updated !=null){
        return Response
                .ok(updated)
                .build();
    }
    return Response
            .noContent()
            .build();
}

@Secure接口,AuthorizationFilter和AuthenticationFilter和我上面贴的link基本一样。

Angular请求

const headersAuth = new Headers({'Content-Type': 'application/json', 'Authorization': 'Bearer ' + this.userService.loggedUserToken});
return this.http.post(this.url + this.likeURL, comment, {headers: headersAuth})
  .map(
    (res: Response) => {
      const body: CommentModel = res.json();
      return body || {};
    }
  )
  .catch(this.handleError);

}

请记住,完全相同的 headers 和通过邮递员应用程序发送到资源的内容工作正常,但是当我尝试通过 Angular POST 发送时,我在不触发过滤器的情况下获得 403 禁止。当我从 Angular

中删除 @Secure 和 Authorization header 时它也有效

经过繁琐的谷歌搜索后,我找到了解决方案。它正在利用 tomcat 的 cors 过滤器。

将此添加到 web.xml

    <filter-name>CorsFilter</filter-name>
    <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>

    <!-- With or without this, it doesn't work -->
    <init-param>
        <param-name>cors.allowed.headers</param-name>
        <param-value>x-rest-version,Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers,Authorization</param-value>
    </init-param>

    <init-param>
        <param-name>cors.allowed.origins</param-name>
        <param-value>http://localhost:4200</param-value>
    </init-param>

    <init-param>
        <param-name>cors.allowed.methods</param-name>
        <param-value>GET,POST,HEAD,OPTIONS,PUT,DELETE</param-value>
    </init-param>

    <init-param>
        <param-name>cors.exposed.headers</param-name>
        <param-value>Location</param-value>
    </init-param>

</filter>