如何发送通过JavaScript跨域POST请求？ [英] How do I send a cross-domain POST request via JavaScript?

问题描述

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

How do I send a cross-domain POST request via JavaScript?

注意 - 它不应该刷新页面，我要抓住和解析响应后

Notes - it shouldn't refresh the page, and I need to grab and parse the response afterward.

您帮助一些code的例子将大大AP preciated。

Your help with some code examples will be much appreciated.

推荐答案

更新：在继续之前每个人都应该阅读和理解的的CORS教程。这是很容易理解和非常明确的。

Update: Before continuing everyone should read and understand the html5rocks tutorial on CORS. It is easy to understand and very clear.

如果你控制了服务器被张贴，只需在服务器上设置响应头利用跨域资源共享标准。这个答案是在这个线程其他的答案中讨论，但不是很清楚在我看来。

If you control the server being POSTed, simply leverage the "Cross-Origin Resource Sharing standard" by setting response headers on the server. This answer is discussed in other answers in this thread, but not very clearly in my opinion.

总之这里是你如何完成从from.com/1.html跨域POST到to.com/postHere.php（使用PHP为例）。注意：您只需要设置访问控制 - 允许 - 原产地非选项请求 - 这个例子中，通常会将所有头一个较小的code段。

In short here is how you accomplish the cross domain POST from from.com/1.html to to.com/postHere.php (using PHP as an example). Note: you only need to set Access-Control-Allow-Origin for NON OPTIONS requests - this example always sets all headers for a smaller code snippet.

1. 在postHere.php设置如下：

1. In postHere.php setup the following:

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和选项。当你继续阅读这将变得清晰......

This allows your script to make cross domain POST, GET and OPTIONS. This will become clear as you continue to read...

从JS（jQuery的例子）设置你的跨域POST：

Setup your cross domain POST from JS (jQuery example):

$.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.');
    }
});

当你做POST在步骤2中，浏览器会发送一个选项方法服务器。这是一个嗅由浏览器来查看服务器是否是冷静与你张贴到它。服务器响应的访问控制 - 允许 - 原产地告诉浏览器其确定POST | GET | ORIGIN如果请求源于的http：//从。 COM 或 https://from.com 。由于服务器是就OK了，浏览器会进行第二次请求（此时一个POST）。它是让你的客户端设置的内容的类型，你送好习惯 - 所以你需要允许以及

When you do the POST in step 2, your browser will send a "OPTIONS" method to the server. This is a "sniff" by the browser to see if the server is cool with you POSTing to it. The server responds with an "Access-Control-Allow-Origin" telling the browser its OK to POST|GET|ORIGIN if request originated from "http://from.com" or "https://from.com". Since the server is OK with it, the browser will make a 2nd request (this time a POST). It is good practice to have your client set the content type it is sending - so you'll need to allow that as well.

MDN有一个伟大的写了关于 HTTP访问控制，即进入了如何对整个流程的工作原理的细节。根据他们的文档，它应该工作，在支持跨站点XMLHtt prequest浏览器。这是一个有点误导然而，作为我的 THINK 的唯一的现代浏览器允许跨域POST。我只验证这一点适用于野生动物园，铬，FF 3.6。

MDN has a great write-up about HTTP access control, that goes into detail of how the entire flow works. According to their docs, it should "work in browsers that support cross-site XMLHttpRequest". This is a bit misleading however, as I THINK only modern browsers allow cross domain POST. I have only verified this works with safari,chrome,FF 3.6.

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

Keep in mind the following if you do this:

1. 您的服务器将处理每运行2请求
2. 您将不得不考虑的安全问题。小心做类似的访问控制 - 允许 - 产地：*'之前
3. 在这个移动浏览器无法工作。根据我的经验，他们不允许跨域POST的。我测试过的Andr​​oid的iPad，iPhone
4. 有一个在FF℃的pretty的大bug; 3.6当服务器返回一个非400响应code，有一个响应主体（例如验证错误），FF 3.6不会得到响应主体。这是在屁股巨大的痛苦，因为你不能使用休息好做法。见错误这里（其jQuery的下提出的，但我的猜测是它的一个FF的错误 - 似乎是固定的在FF4）。
5. 总是返回头以上的，不只是在OPTION请求。 FF需要它从POST的响应。

1. Your server will have to handle 2 requests per operation
2. You will have to think about the security implications. Be careful before doing something like 'Access-Control-Allow-Origin: *'
3. This wont work on mobile browsers. In my experience they do not allow cross domain POST at all. I've tested android, iPad, iPhone
4. There is a pretty big bug in FF < 3.6 where if the server returns a non 400 response code AND there is a response body (validation errors for example), FF 3.6 wont get the response body. This is a huge pain in the ass, since you cant use good REST practices. See bug here (its filed under jQuery, but my guess is its a FF bug - seems to be fixed in FF4).
5. Always return the headers above, not just on OPTION requests. FF needs it in the response from the POST.

这篇关于如何发送通过JavaScript跨域POST请求？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！