为什么在 Angular 中使用 POST 请求发送文件时，“Access-Control-Allow-Headers”中不允许我的“Access-Control-Allow-Origin”标头？

问题：带标头的跨源请求错误

尝试使用 POST 请求发送文件时，开发人员可能会遇到错误，表明Access-Control-Allow-Headers 响应标头不允许特定的请求标头。

为了解决此问题，开发人员在请求中添加了以下标头：

"Access-Control-Allow-Origin" : "*",
"Access-Control-Allow-Methods" : "GET,POST,PUT,DELETE,OPTIONS",
"Access-Control-Allow-Headers": "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With"

但是，这导致了一个新错误，指出“Access-Control-Allow-Headers”标头不允许“Access-Control-Allow-Origin”标头。

解决方案：标头限制和默认内容类型

对于跨域请求，如果内容类型未设置为以下三种特定类型之一，浏览器将发送预检选项请求：“application/x-www-form-urlencoded” 、“multipart/form-data”或“text/plain”。

默认情况下，Angular 将内容类型设置为“application/json”，这不是跨域请求可接受的类型之一。这会触发预检 OPTIONS 请求，但由于“Access-Control-Allow-Headers”标头的限制，该请求被拒绝。

要解决此问题，开发人员可以覆盖 Angular 中的默认内容类型或允许服务器端使用“Access-Control-Allow-Headers”标头。

覆盖默认标头的 Angular 示例：

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

以上是为什么在 Angular 中使用 POST 请求发送文件时，“Access-Control-Allow-Headers”中不允许我的“Access-Control-Allow-Origin”标头？的详细内容。更多信息请关注PHP中文网其他相关文章！