如何修复跨源请求中的'Access-Control-Allow-Headers 不允许请求标头字段 Access-Control-Allow-Headers”错误？

解决“Access-Control-Allow-Headers 不允许请求标头字段 Access-Control-Allow-Headers”错误

中为了纠正最初的错误，将标头添加到请求中以允许各种方法和标头。但是，这导致了一个新错误：“Access-Control-Allow-Headers 不允许请求标头字段 Access-Control-Allow-Origin。”

了解 CORS 和预检请求

该问题源于浏览器针对某些内容类型的跨域请求发送预检 OPTIONS 请求。默认情况下，Angular 发送具有 application/json 内容类型的数据，这会触发此预检请求。

服务器响应和标头

服务器必须显式允许访问 -其响应中的 Control-Allow-Headers 标头可防止出现错误。否则，浏览器会将响应解释为不允许任何标头。

解决方案：修改内容类型或服务器响应

要解决此问题，请修改客户端或服务器配置：

1.客户端（Angular）：

将默认的 Angular 内容类型覆盖为 application/x-www-form-urlencoded，这不会触发预检请求：

$http.post(url, data, {
    headers : {
        'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8'
    }
});

2.服务器端：

或者，允许服务器上的 Access-Control-Allow-Headers 标头。必须设置以下响应标头：

• Access-Control-Allow-Origin: * 或特定来源（例如 https://example.com）
• Access-Control -Allow-Methods：GET、POST、PUT、DELETE、OPTIONS
• Access-Control-Allow-Headers：客户端在请求中发送的所有标头（例如 Content-Type、Authorization）

以上是如何修复跨源请求中的'Access-Control-Allow-Headers 不允许请求标头字段 Access-Control-Allow-Headers”错误？的详细内容。更多信息请关注PHP中文网其他相关文章！