域的POST请求通过JavaScript？

2018-06-16 19:23:50

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

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

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

更新：在继续之前，每个人都应该阅读并理解CORS上的html5rocks教程。这很容易理解，非常清楚。

如果您控制正在发布的服务器，只需在服务器上设置响应标题即可使用“跨源资源共享标准”。在这个主题的其他答案中讨论了这个答案，但在我看来并不十分清楚。

简而言之，就是您如何完成从from.com/1.html到to.com/postHere.php的跨域POST（使用PHP作为示例）。注意：您只需要为非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（jQuery示例）设置您的跨域POST：

$.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”，则服务器响应“访问控制 - 允许 - 来源”告诉浏览器它可以发送POST | GET | ORIGIN。由于服务器正常，浏览器将发出第二个请求（这次是POST）。让客户端设置它发送的内容类型是一个很好的做法 - 所以你也需要允许。

MDN对HTTP访问控制进行了很好的描述，详细描述了整个流程的工作原理。根据他们的文档，它应该“在支持跨站点XMLHttpRequest的浏览器中工作”。但是，这有点让人误解，因为我认为只有现代浏览器允许跨域POST。我只用safari，chrome，FF 3.6验证了这一点。

如果你这样做，请记住以下几点：

您的服务器必须处理每个操作的2个请求

你将不得不考虑安全影响。在做'Access-Control-Allow-Origin：*'之前要小心

这不适用于移动浏览器。根据我的经验，他们根本不允许跨域POST。我测试过Android，iPad，iPhone

在FF <3.6中存在一个很大的错误，如果服务器返回一个非400响应代码并且存在响应主体（例如验证错误），那么FF 3.6不会得到响应主体。这是一个巨大的痛苦，因为你不能使用良好的REST实践。在这里看到bug（它在jQuery下提交，但我的猜测是它的FF错误 - 似乎在FF4中被修复）。

总是返回上面的标题，而不仅仅是OPTION请求。 FF在POST的响应中需要它。

如果您控制远程服务器，则应该使用CORS，如本答案中所述; 它支持IE8及以上版本，以及FF，GC和Safari的所有最新版本。（但在IE8和9中，CORS将不允许您在请求中发送Cookie。）

所以，如果你不控制远程服务器，或者你必须支持IE7，或者如果你需要cookies并且你必须支持IE8 / 9，你可能需要使用iframe技术。

用唯一的名称创建一个iframe。（iframe对整个浏览器使用全局名称空间，所以选择一个不会被其他网站使用的名称。）

构建一个带有隐藏输入的表单，以iframe为目标。

提交表单。

这里是示例代码; 我在IE6，IE7，IE8，IE9，FF4，GC11，S5上测试过它。

function crossDomainPost() {
  // Add the iframe with a unique name
  var iframe = document.createElement("iframe");
  var uniqueString = "CHANGE_THIS_TO_SOME_UNIQUE_STRING";
  document.body.appendChild(iframe);
  iframe.style.display = "none";
  iframe.contentWindow.name = uniqueString;

  // construct a form with hidden inputs, targeting the iframe
  var form = document.createElement("form");
  form.target = uniqueString;
  form.action = "http://INSERT_YOUR_URL_HERE";
  form.method = "POST";

  // repeat for each parameter
  var input = document.createElement("input");
  input.type = "hidden";
  input.name = "INSERT_YOUR_PARAMETER_NAME_HERE";
  input.value = "INSERT_YOUR_PARAMETER_VALUE_HERE";
  form.appendChild(input);

  document.body.appendChild(form);
  form.submit();
}

谨防！您将无法直接阅读POST的响应，因为iframe存在于单独的域中。不允许帧来自不同域的彼此通信; 这是同源政策。

如果您控制远程服务器但不能使用CORS（例如，因为您使用的是IE8 / IE9并且您需要使用Cookie），有办法解决同源策略，例如使用window.postMessage和/或许多库中的一个允许您在旧版浏览器中发送跨域的跨框架消息：

炮眼

XSSInterface

EasyXDM

jQuery PostMessage插件

如果您不控制远程服务器，则无法读取POST的响应时间段。否则会导致安全问题。

创建一个iFrame，

用隐藏的输入来放置一个表单，

将表单的操作设置为URL，

将iframe添加到文档

提交表格

伪代码

 var ifr = document.createElement('iframe');
 var frm = document.createElement('form');
 frm.setAttribute("action", "yoururl");
 frm.setAttribute("method", "post");

 // create hidden inputs, add them
 // not shown, but similar (create, setAttribute, appendChild)

 ifr.appendChild(frm);
 document.body.appendChild(ifr);
 frm.submit();

您可能想要设置iframe的样式，以便隐藏并绝对定位。不确定浏览器允许跨网站发帖，但如果是这样，那么这是如何做到的。

链接地址: http://www.djcxy.com/p/47551.html

上一篇: domain POST request via JavaScript?

下一篇: domain ajax JSONP request with jQuery