如何通过JavaScript发送跨域POST请求?
注意-它不应该刷新页面,之后我需要抓取并解析响应。
如果你控制要发布的服务器,只需在服务器上设置响应头即可利用“跨域资源共享标准”。此答案在该主题的其他答案中进行了讨论,但我认为不是很清楚。
简而言之,这里是如何完成从from.com/1.html到to.com/postHere.php的跨域POST(以PHP为例)。注意:你只需要设置Access-Control-Allow-OriginNON OPTIONS请求-此示例始终为较小的代码段设置所有标头。
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验证了此功能。
如果这样做,请记住以下几点: