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

Question

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

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

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

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

  ask by Ido Schacham translate from so

Answer 1

Update: Before continuing everyone should read and understand the html5rocks tutorial on CORS.

(更新：在继续之前，每个人都应该阅读和理解CORS上的html5rocks教程 。)

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.

(在该主题的其他答案中讨论了这个答案，但我认为不是很清楚。)

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).

(简而言之，这里是您如何完成从from.com/1.html到to.com/postHere.php的跨域POST（以PHP为例）。)

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.

(注意：您只需要为NON OPTIONS请求设置Access-Control-Allow-Origin Origin-此示例始终为较小的代码段设置所有标头。)

1. In postHere.php setup the following:

   (在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; } 

   This allows your script to make cross domain POST, GET and OPTIONS.

   (这使您的脚本可以进行跨域的POST，GET和OPTIONS。)

   This will become clear as you continue to read...

   (当您继续阅读时，这将变得很清楚。)

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

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

When you do the POST in step 2, your browser will send a "OPTIONS" method to the server.

(在步骤2中执行POST时，浏览器将向服务器发送“ OPTIONS”方法。)

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 ".

(如果请求来自“ http://from.com ”或“ https://from.com ”，服务器将以“ Access-Control-Allow-Origin”响应，告知浏览器可以执行POST | GET | ORIGIN。)

Since the server is OK with it, the browser will make a 2nd request (this time a POST).

(由于服务器可以使用，因此浏览器将发出第二个请求（这次是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 has a great write-up about HTTP access control , that goes into detail of how the entire flow works.

(MDN撰写了大量有关HTTP访问控制的文章 ，其中详细介绍了整个流程的工作方式。)

According to their docs, it should "work in browsers that support cross-site XMLHttpRequest".

(根据他们的文档，它应该“在支持跨站点XMLHttpRequest的浏览器中工作”。)

This is a bit misleading however, as I THINK only modern browsers allow cross domain POST.

(但是，这有点误导，因为我认为只有现代浏览器才允许跨域POST。)

I have only verified this works with safari,chrome,FF 3.6.

(我仅使用Safari，chrome，FF 3.6验证了此功能。)

Keep in mind the following if you do this:

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

1. Your server will have to handle 2 requests per operation

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

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.

   (以我的经验，它们根本不允许跨域POST。)

   I've tested android, iPad, iPhone

   (我已经测试了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.

   (FF <3.6中存在一个很大的错误，如果服务器返回非400响应代码并且存在响应正文（例如验证错误），则FF 3.6不会获得响应正文。)

   This is a huge pain in the ass, since you cant use good REST practices.

   (这是一个巨大的麻烦，因为您不能使用良好的REST实践。)

   See bug here (its filed under jQuery, but my guess is its a FF bug - seems to be fixed in FF4).

   (在此处查看错误（它已归档在jQuery下，但我猜是它的FF错误-似乎已在FF4中修复）。)

5. Always return the headers above, not just on OPTION requests.

   (始终返回上面的标头，而不仅仅是返回OPTION请求。)

   FF needs it in the response from the POST.

   (FF在POST的响应中需要它。)