FireFox的Angularjs CORS失败

Posted 2023-03-04

【中文标题】FireFox的Angularjs CORS失败

【英文标题】：Angularjs CORS failure with FireFox

【发布时间】：2015-10-30 02:42:50

【问题描述】：

下面的脚本（较大的 jquery 2.1.4 和 angularjs 1.3.16 的一部分）在 Chrome(44) 和 IE(11) 上运行良好，但在 FF(39) 上失败并出现 CORS 错误：“跨域请求Blocked”是跨域的。

我找了又找，把头撞在键盘上，喝了很多露水，寻找解决方案。我的“猜测”是 FF 可能需要一个自定义标题。但是我对此没有太多了解，并且似乎找不到该自定义标头设置（如果存在）。

我在第二天。任何帮助将不胜感激！

有什么想法吗？

$http(
        url: MYBASEWEBSERVICEURL + 'SearchProductByCriteria',
        method: 'POST',
        data: postdata,
    )
    .success(function (data) 
        //do angular stuff with the data
    )
    .error(function () 
        //do stuff with the !data
    );

以下是 Postman 的标题：

Access-Control-Allow-Origin → *
Cache-Control → private
Content-Length → 1880
Content-Type → application/json; charset=utf-8
Date → Thu, 06 Aug 2015 20:20:39 GMT
Server → Microsoft-IIS/8.5
X-AspNet-Version → 4.0.30319
X-Powered-By → ASP.NET

从 FF 浏览器获取的标题：

回复：

Access-Control-Allow-Origin:"*"
Cache-Control:"private"
Content-Length:"649"
Content-Type:"application/json; charset=utf-8"
Date:"Thu, 06 Aug 2015 20:49:21 GMT"
Server:"Microsoft-IIS/8.5"
X-AspNet-Version:"4.0.30319"
X-Powered-By:"ASP.NET"

请求：

Host: myhost.net
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:39.0) Gecko/20100101 Firefox/39.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Access-Control-Request-Method: POST
Access-Control-Request-Headers: content-type
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache

【问题讨论】：

具体错误是什么？是跨域还是跨端口请求？这里没有太多细节可供参考。还有助于了解正在发送的响应标头

此时它是默认的 JQuery 标头。就像你在上面看到的那样。错误“Cross-Origin Request Blocked”是跨域的。

响应中没有默认 jQuery 标头之类的东西...服务器设置了这些标头。服务器是否设置为接收 OPTIONS 请求

应该真的从浏览器中获取。查看开发工具网络。邮递员没有相同的限制，可能不会发送预检 OPTIONS 请求

浏览器开发工具网络选项卡...可以查看和检查对整个页面发出的每个请求

【参考方案1】：

在您的服务标头中设置， 如果你的服务 php 你可以使用 THIS

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

【讨论】：

好的，“Access-Control-Allow-Credentials: true”对不需要凭据的网站有什么作用

【参考方案2】：

在解决了这个问题后，我们终于找到了问题。

这与证书和 Mozilla 有关。

请参阅this SO post 了解更多信息。

（谢谢@Godwhacker）