如何修复 Firefox 中的跨域请求失败

Posted 2023-02-27

【中文标题】如何修复 Firefox 中的跨域请求失败

【英文标题】：How to fix cross-origin request fail in Firefox

【发布时间】：2016-01-12 03:53:18

【问题描述】：

我有一个 javascript 文件，我想在其中将 json 数据发送到 ERP 系统：

 var formData1 = JSON.stringify($('#msform').serializeObject());
    $.ajax(
        url:'http://102.101.101.11:80/c/orders',
        type:'POST',
        data:formData1,
        crossDomain: true,
        dataType: 'json',
        jsonpCallback: 'callback',
        success: function(data) 
            //window.location.href = "http://www.petlooza.com";
            console.log(data);
        
    );

此脚本适用于 chrome 和 IE，但 FIREFOX 给了我这个错误：

跨域请求被阻止：同源策略不允许读取 url 处的远程资源。原因：Cors-request 失败。

如何解决这个问题？ 请参阅下面的解决方案！

【问题讨论】：

可以看到ajax请求的协议是http。请问您的浏览器位置栏显示的协议是什么？

对不起，我不明白你的意思

我的意思是请求和ajax请求的协议是什么。是否有两个不同的请求，即 https 用于加载页面的原始请求和 http 用于 ajax 调用。

不，帖子是从 HTTP 到 HTTP。它发生在从网络服务器到使用 http url 侦听的 Lotus Notes 代理

请不要在问题中包含解决方案，而是将其发布为您自己问题的答案并将其标记为正确答案。这有助于保持整洁。

【参考方案1】：

我通过以下操作修复了它：

A.您需要在运行脚本的主机上有一个 .htaccess。

<FilesMatch "\.(php)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Methods "POST, GET, OPTIONS"
Header set Access-Control-Max-Age "1000"
Header set Access-Control-Allow-Headers "x-requested-with, Content-Type, origin, authorization, accept, client-security-token"

其次，ERP系统也需要设置标题。如果标题设置正确，您可以使用 curl 检查。

B.另一种选择：如果您不想使用标头，或者无法设置某些标头，那么您可以使用 CURL 来完成这项工作：

在我的表单上单击提交时，我的脚本将调用一个 .php 文件，其中包含以下代码：

<?php
//
//code to send json to lotus webservice without cors errors
//
$jsondata = $_GET['jsondata'];
$ch = curl_init();

curl_setopt($ch, CURLOPT_URL,"102.101.101.11:80/c/orders");
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS,$jsondata);

// in real life you should use something like:
// curl_setopt($ch, CURLOPT_POSTFIELDS,
//          http_build_query(array('postvar1' => 'value1')));

// receive server response ...
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

$server_output = curl_exec ($ch);


curl_close ($ch);



?>

它有效！没有更多的cors错误！并将数据发送到服务器并由服务器接收:)

【讨论】：

允许所有来源可能是一个漏洞。最好允许您知道安全的特定来源。

【参考方案2】：

如果你可以控制另一端的代码，你可以使用 JSONP 来获取数据，并且可以避免 CORS 的所有问题。

更新：前几天我写了一篇关于 JSONP 的博客：http://blog.texasswede.com/calling-a-notes-web-agent-from-another-server-using-jsonp/

【讨论】：

谷歌？ :-) 前几天我写了一篇关于 JSONP 的博客，你也可以看看那篇文章。我将链接添加到我的答案中。

【参考方案3】：

我建议查看以下资源：

Firefox CORS request giving 'Cross-Origin Request Blocked' despite headers 这是不久前的 *** 问题。

https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy 可能会帮助您调试问题，它展示了 Mozilla 如何在 CORS 上实施自己的安全策略。

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS 是关于 Mozilla 的 CORS 实现的深入服务器端文档。

可能是您通过不同的协议或主机请求它，我们无法从您的示例中看出这是常见的故障模式。