如何通过JavaScript发送跨域POST请求？

  • Z时代
  • 2024-01-10
  • 分类：问答

如何通过JavaScript发送跨域POST请求？

注意-它不应该刷新页面，之后我需要抓取并解析响应。

回答：

如果你控制要发布的服务器，只需在服务器上设置响应头即可利用“跨域资源共享标准”。此答案在该主题的其他答案中进行了讨论，但我认为不是很清楚。

简而言之，这里是如何完成从from.com/1.html到to.com/postHere.php的跨域POST（以PHP为例）。注意：你只需要设置Access-Control-Allow-OriginNON OPTIONS请求-此示例始终为较小的代码段设置所有标头。

在postHere.php中，设置以下内容：

switch ($_SERVER['HTTP_ORIGIN']) {
    case 'http://from.com': case 'https://from.com':
    header('Access-Control-Allow-Origin: '.$_SERVER['HTTP_ORIGIN']);
    header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS');
    header('Access-Control-Max-Age: 1000');
    header('Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-With');
    break;
}

这使你的脚本可以进行跨域的POST，GET和OPTIONS。当你继续阅读时，这将变得很清楚。

从JS设置跨域POST（jQuery示例）：

$.ajax({
    type: 'POST',
    url: 'https://to.com/postHere.php',
    crossDomain: true,
    data: '{"some":"json"}',
    dataType: 'json',
    success: function(responseData, textStatus, jqXHR) {
        var value = responseData.someKey;
    },
    error: function (responseData, textStatus, errorThrown) {
        alert('POST failed.');
    }
});

在步骤2中执行POST时，浏览器将向服务器发送“ OPTIONS”方法。这是浏览器的“嗅探器”，用于查看服务器是否在你发布时保持冷静。如果请求来自“ http://from.com ”或“ https://from.com ” ，服务器将以“ Access-Control-Allow-Origin”响应，告知浏览器可以执行POST | GET | ORIGIN 。由于服务器可以使用，因此浏览器将发出第二个请求（这次是POST）。好的做法是让你的客户端设置要发送的内容类型-因此你也需要允许它。

其中详细介绍了整个流程的工作方式。根据他们的文档，它应该“在支持跨站点XMLHttpRequest的浏览器中工作”。但是，这有点误导，因为我认为只有现代浏览器才允许跨域POST。我只用Safari，chrome，FF 3.6验证了此功能。

如果这样做，请记住以下几点：

  • 你的服务器每个操作将必须处理2个请求

  • 你将不得不考虑安全隐患。在执行“访问控制允许来源：*”之类的操作之前，请务必小心。

  • 这不适用于移动浏览器。以我的经验，它们根本不允许跨域POST。我已经测试了android，iPad，iPhone

  • FF <3.6中存在一个很大的错误，如果服务器返回非400响应代码并且存在响应正文（例如验证错误），则FF 3.6不会获得响应正文。这是一个巨大的麻烦，因为你不能使用良好的REST实践。在此处查看错误（它已归档在jQuery下，但我猜是它的FF错误-似乎在FF4中已修复）。

  • 始终返回上面的标头，而不仅仅是返回OPTION请求。FF在POST的响应中需要它。

以上是 如何通过JavaScript发送跨域POST请求？ 的全部内容， 来源链接： utcz.com/qa/433702.html

回到顶部