飞行前响应中Access-Control-Allow-Headers不允许请求标头字段Access-Control-Allow-Methods [英] Request header field Access-Control-Allow-Methods is not allowed by Access-Control-Allow-Headers in preflight response

问题描述

我在前端使用Angular，在后端使用Jersey.执行PUT请求时出现异常.这是Angular代码:

I'm using Angular in the frontend and Jersey for backend. I am getting an exception when I execute my PUT request. This is the Angular code:

const header=new Headers({'Content-Type':'application/x-www-form-urlencoded'});
header.append("Access-Control-Allow-Methods", "POST");
header.append("Access-Control-Allow-Headers","Access-Control-Allow-Origin");

return this.http.post('http://localhost:8080',home,{headers: header})
    .pipe(map((response: Response)=>{return response.json();}));

这是我在泽西岛的过滤器:

This is my filter in Jersey:

@Provider
public class CORSResponseFilter implements ContainerResponseFilter {

    @Override
    public void filter(ContainerRequestContext requestContext, ContainerResponseContext responseContext)
            throws IOException {

        responseContext.getHeaders().add("Access-Control-Allow-Origin", "*");
        //headers.add("Access-Control-Allow-Origin", "http://podcastpedia.org"); podcastpedia.org       
        responseContext.getHeaders().add("Access-Control-Allow-Methods", "GET,PUT,POST,DELETE,PATCH,OPTIONS");          
        responseContext.getHeaders().add("Access-Control-Allow-Headers", "Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers"); 
    }

}

这是例外:

无法加载 http://localhost:8080/请求标头字段Access-Control-Allow-Methods为飞行前响应中Access-Control-Allow-Headers不允许

Failed to load http://localhost:8080/ Request header field Access-Control-Allow-Methods is not allowed by Access-Control-Allow-Headers in preflight response

有人可以帮助我吗?

推荐答案

从前端代码中的HttpHeaders中删除Access-Control-Allow-Methods和Access-Control-Allow-Headers.这些标头应该从服务器作为 response 标头发送(这是您在CORSResponseFilter中所做的事情).

Remove the Access-Control-Allow-Methods and the Access-Control-Allow-Headers from the HttpHeaders in the frontend code. These headers are supposed be sent as response headers from the server (which is what you are doing in your CORSResponseFilter).

无法加载 http://localhost:8080/请求标头字段Access-Control-Allow-Methods为飞行前响应中Access-Control-Allow-Headers不允许

Failed to load http://localhost:8080/ Request header field Access-Control-Allow-Methods is not allowed by Access-Control-Allow-Headers in preflight response

此错误的意思是服务器响应标头Access-Control-Allow-Headers在标头值中不包含Access-Control-Allow-Methods(不应该). Access-Control-Allow-Headers的目的是告诉浏览器允许客户端将哪些请求标头发送到服务器.您可以在CORSResponseFilter中看到允许的标题. Access-Control-Allow-Methods不是其中之一.

What this error is saying is that the server response header Access-Control-Allow-Headers doesn't include Access-Control-Allow-Methods in the header value (which is shouldn't). The purpose of the Access-Control-Allow-Headers is to tell the browser which request headers the client is allowed to send to the server. You can see in the CORSResponseFilter which headers you allow. Access-Control-Allow-Methods is not one of them.

在使用它的同时，您也可以删除Access-Control-Allow-Headers响应标头中的所有Access-Control-XX-XX值.这些不是必需的.您是说客户端可以发送这些请求标头，而这是不应该的.

And while your at it, you might as well remove all the Access-Control-XX-XX values in the Access-Control-Allow-Headers response header. These are not required. You are saying that client can send these request headers, which it shouldn't be doing.

另请参见:

• 查看此答案中的更新，以获取有关这些标头如何工作的良好解释(如果您有兴趣的话).

• Check out the update in this answer for a good explanation about how these headers work (if you are interested).

这篇关于飞行前响应中Access-Control-Allow-Headers不允许请求标头字段Access-Control-Allow-Methods的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！