预检响应中的 Access-Control-Allow-Headers 不允许请求 header 字段 Access-Control-Allow-Methods

Question

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

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

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

@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"); 
    }

}

这是例外情况：

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

谁能帮帮我？

Answer 1

从前端代码的 HttpHeaders 中删除 Access-Control-Allow-Methods 和 Access-Control-Allow-Headers。这些 headers 应该作为 response headers 从服务器发送（这就是你在 CORSResponseFilter 中所做的）。

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

这个错误的意思是服务器响应 header Access-Control-Allow-Headers 没有在 header 值中包含 Access-Control-Allow-Methods（这是不应该的）。 Access-Control-Allow-Headers 的目的是告诉浏览器允许客户端向服务器发送哪些请求 header。您可以在 CORSResponseFilter 中看到您允许哪些 header。 Access-Control-Allow-Methods 不是其中之一。

在您这样做的同时，您也可以删除 Access-Control-Allow-Headers 响应 header 中的所有 Access-Control-XX-XX 值。这些不是必需的。你是说客户端可以发送这些请求 headers，它不应该这样做。

另请参阅：

查看 the update in this answer 了解这些 header 的工作原理（如果您有兴趣）。

预检响应中的 Access-Control-Allow-Headers 不允许请求 header 字段 Access-Control-Allow-Methods

Request header field Access-Control-Allow-Methods is not allowed by Access-Control-Allow-Headers in preflight response

jersey

http-headers

cors

angular