预检响应中的 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预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段 Access-Control-Allow-Methods
【发布时间】：2019-02-21 13:45:27
【问题描述】：

我在前端使用 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"); 
    }

}

这是个例外：

无法加载 http://localhost:8080/ 请求标头字段 Access-Control-Allow-Methods 在预检响应中被 Access-Control-Allow-Headers 不允许

谁能帮帮我？

【问题讨论】：

stackoverflow.com/q/32500073/1531971
@jdv 不是正确答案，因为我需要解决“请求标头字段 Access-Control-Allow-Methods”
您需要清楚关于您报告的同一条消息的问答与您的研究无关。请参阅How to Ask，但您有责任进行一些基础研究，包括任何其他问答，并告诉我们它们如何不适用于这种情况。这应该通过edit 出现在问题的文本中。
这是您问题的正确答案，角度尝试执行选项请求，但您的服务器没有为此类请求提供正确的标头...
@JohnnyAW 哪个是正确的标题？

标签： angular cors jersey http-headers

【解决方案1】：

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

无法加载 http://localhost:8080/ 请求标头字段 Access-Control-Allow-Methods 在预检响应中被 Access-Control-Allow-Headers 不允许

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

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

另请参阅：

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

【讨论】：