java - Angular 2/4 和 Jersey REST CORS 问题

Question

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

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

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

这是我的类(class):

@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接口(interface)、AuthorizationFilter和AuthenticationFilter与我上面发布的链接基本相同。

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);

}

请记住，通过 postman 应用程序发送到资源的标题和内容完全相同，工作正常，但当我尝试通过 Angular POST 发送它时，我得到 403 禁止，甚至没有触发过滤器。当我从 Angular 中删除 @Secure 和 Authorization header 时，它也有效

Answer 1

经过繁琐的谷歌搜索后，我找到了解决方案。它利用了 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>