一尘不染

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

spring

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

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


阅读 1270

收藏
2020-04-23

共1个答案

一尘不染

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

简而言之,这里是如何完成从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的响应中需要它。
2020-04-23