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

Question

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

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-Headers 不允许请求标头字段 Access-Control-Allow-Methods

有人可以帮助我吗？

Answer 1

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

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

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

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

也可以看看：

• 查看此答案中的更新，以获得有关这些标头如何工作的良好解释（如果您感兴趣）。