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

Question

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

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

Answer 1

更新:在继续之前，每个人都应该阅读并理解 html5rocks tutorial在 CORS 上。通俗易懂，非常清晰。

如果您控制正在发布的服务器，只需通过在服务器上设置响应 header 来利用“跨源资源共享标准”。这个答案在这个帖子的其他答案中讨论过，但在我看来不是很清楚。

简而言之，这是您如何完成从 from.com/1.html 到 to.com/postHere.php 的跨域 POST(以 PHP 为例)。注意:您只需为非 OPTIONS 请求设置 Access-Control-Allow-Origin - 此示例始终为较小的代码片段设置所有 header 。

1. 在 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。随着您继续阅读，这将变得清晰......

2. 从 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 的浏览器中工作”。然而，这有点误导，因为我 THINK 只有现代浏览器允许跨域 POST。我只验证了这适用于 safari、chrome、FF 3.6。

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

1. 您的服务器每次操作必须处理 2 个请求
2. 您必须考虑安全隐患。在执行“Access-Control-Allow-Origin: *”之类的操作之前要小心
3. 这不适用于移动浏览器。根据我的经验，他们根本不允许跨域 POST。我测试过安卓、iPad、iPhone
4. FF < 3.6 中存在一个相当大的错误，如果服务器返回非 400 响应代码并且存在响应正文(例如验证错误)，则 FF 3.6 将无法获取响应正文。这是一个巨大的痛苦，因为您不能使用良好的 REST 实践。见错误 here (它在 jQuery 下提交，但我猜它是一个 FF 错误 - 似乎已在 FF4 中修复)。
5. 始终返回上面的 header ，而不仅仅是 OPTION 请求。 FF 在 POST 的响应中需要它。