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

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

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

您对一些代码示例的帮助将非常感谢。

最佳答案
更新:在继续之前,每个人都应该阅读并理解CORS上的html5rocks tutorial。它很容易理解,很清楚。

如果您控制服务器POST,只需通过在服务器上设置响应头来利用“跨源资源共享标准”。这个答案在这个线程的其他答案讨论,但不是很清楚在我看来。

总之,这里是如何完成从from.com/1.html到to.com/postHere.php的跨域POST(使用PHP为例)。注意:您只需要为NON OPTIONS请求设置Access-Control-Allow-Origin – 此示例始终为较小的代码段设置所有标头。

>在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”方法。这是浏览器的“嗅探”,看看服务器是否很酷与你邮寄。服务器以“Access-Control-Allow-Origin”响应,告诉浏览器如果请求源自“http://from.com”或“https://from.com”,则确认POST | GET | ORIGIN。由于服务器可以使用它,浏览器将发出第二个请求(这次是POST)。优良做法是让您的客户端设置其发送的内容类型,因此您还需要允许此类型。

MDN有一个伟大的写HTTP access control,详细了解整个流程如何工作。根据他们的文档,它应该“在支持跨站点XMLHttpRequest的浏览器”。这是一个有点误导,但我认为只有现代浏览器允许跨域POST。我只有验证这个作品与safari,chrome,FF 3.6。

如果您这样做,请记住以下内容:

>您的服务器将必须每个操作处理2个请求
>你必须考虑安全隐患。在执行类似“Access-Control-Allow-Origin:*”之类的操作之前要小心。
>这不会在移动浏览器上工作。在我的经验,他们不允许跨域POST。我测试了Android,iPad,iPhone
>在FF中有一个相当大的bug, 3.6如果服务器返回一个非400响应代码,并且有一个响应体(例如验证错误),FF 3.6不会得到响应体。这是一个巨大的痛苦的屁股,因为你不能使用良好的REST实践。参见bug here(它在jQuery下提交,但我的猜测是它的一个FF错误 – 似乎在FF4中被修复)。
>始终返回上面的标头,而不仅仅是OPTION请求。 FF需要它在POST的响应中。

转载注明原文:如何通过JavaScript发送跨网域POST请求? - 代码日志