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>
我一直在尝试在后端使用 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>