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

Posted

技术标签:

【中文标题】预检响应中的 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 【发布时间】: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 不允许

谁能帮帮我?

【问题讨论】:

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

从前端代码中的HttpHeaders 中删除Access-Control-Allow-MethodsAccess-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,了解这些标头的工作原理(如果您有兴趣)。

【讨论】:

以上是关于预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段 Access-Control-Allow-Methods的主要内容,如果未能解决你的问题,请参考以下文章

预检响应没有 HTTP ok 状态。 Angular 6 中的 403

OAuth 中的 CORS:对预检请求的响应未通过访问控制检查

预检响应中的 Access-Control-Allow-Headers 不允许授权

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

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

预检响应中的 Access-Control-Allow-Methods 不允许方法 PATCH