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

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

更新：在继续之前,每个人都应该阅读并理解CORS上的html5rocks tutorial.这很容易理解,也很清楚.

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

简而言之,您将如何完成从from.com/1.html到to.com/postHere.PHP的跨域POST(以PHP为例).注意：您只需要为非选项请求设置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”方法.这是浏览器的“嗅探”,看看服务器是否很酷,你发布它.如果请求来自“http://from.com”或“https://from.com”,则服务器以“Access-Control-Allow-Origin”响应,告知浏览器可以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中有一个相当大的错误< 3.6如果服务器返回非400响应代码且存在响应主体(例如验证错误),则FF 3.6不会获得响应主体.这是一个巨大的痛苦,因为你不能使用良好的REST实践.请参阅错误 here(它在jQuery下提交,但我的猜测是它的FF错误 – 似乎在FF4中修复).
>始终返回上面的标题,而不仅仅是OPTION请求. FF在POST的响应中需要它.

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

相关文章