我试图用post请求发送文件到我的服务器,但当它发送时,它会导致错误:

Access-Control-Allow-Headers不允许请求报头字段Content-Type。

所以我谷歌了这个错误,并添加了标题:

$http.post($rootScope.URL, {params: arguments}, {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

所以我谷歌了一下,我能找到的唯一类似的问题是提供了一半的答案,然后关闭为跑题。我应该添加/删除什么头?


当前回答

你可以在PHP中激活适当的头文件:

header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE");
header("Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, X-Requested-With");

其他回答

如果你正在使用localhost和PHP来解决这个问题:

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Headers: Content-Type'); 

从您的前端使用:

{headers: {"Content-Type": "application/json"}}

boom没有更多的问题来自localhost!

对我来说,添加以下到我的服务器的网页。配置文件:

<system.webServer>
    <httpProtocol>
        <customHeaders>
            <add name="Access-Control-Allow-Origin" value="https://other.domain.com" />
            <add name="Access-Control-Allow-Methods" value="GET,POST,OPTIONS,PUT,DELETE" />
            <add name="Access-Control-Allow-Headers" value="Content-Type,X-Requested-With" />
        </customHeaders>
    </httpProtocol>
<system.webServer>

请求报头字段Access-Control-Allow-Origin被Access-Control-Allow-Headers错误不允许 表示HTTP报头的Access-Control-Allow-Origin字段不被响应处理或允许。从请求头中删除Access-Control-Allow-Origin字段。

对我来说,我在web.config中有通配符“*”Access-Control-Allow-Headers:

<add name="Access-Control-Allow-Headers" value="*" />

这个解决方案适用于大多数导航器,但不适用于Safari或IE

结果证明,解决方案是手动添加所有自定义头到web.config:

<system.webServer>
    <httpProtocol>
        <customHeaders>
            <add name="Access-Control-Allow-Origin" value="https://somedomain.com" />
            <add name="Access-Control-Allow-Methods" value="GET,POST,OPTIONS,PUT,DELETE" />
            <add name="Access-Control-Allow-Headers" value="custom-header1, custome-header2, custome-header3" />
        </customHeaders>
    </httpProtocol>
<system.webServer>

我也有同样的问题。在jQuery文档中,我发现:

对于跨域请求,将内容类型设置为application/x-www-form-urlencoded、multipart/form-data或text/plain以外的任何类型将触发浏览器向服务器发送preflight OPTIONS请求。

因此,尽管服务器允许跨源请求,但不允许Access-Control-Allow-Headers,它将抛出错误。默认情况下,angular的内容类型是application/json,它试图发送一个OPTION请求。尝试覆盖angular默认头或允许访问控制允许头在服务器端。下面是一个角度的例子:

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