[英]How do I send a cross-domain POST request via JavaScript?
如何通过 JavaScript 发送跨域 POST 请求？
注意 - 它不应该刷新页面，之后我需要抓取并解析响应。
更新：在继续之前，每个人都应该阅读并理解关于 CORS 的html5rocks 教程。 它很容易理解并且非常清楚。
如果您控制正在发布的服务器，只需通过在服务器上设置响应标头来利用“跨源资源共享标准”。 这个答案在这个线程的其他答案中讨论过，但在我看来不是很清楚。
简而言之，这里是如何完成从 from.com/1.html 到 to.com/postHere.php 的跨域 POST（以 PHP 为例）。 注意：您只需要为 NON 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”方法。 这是浏览器的“嗅探”，以查看服务器是否在您 POST 时很酷。 如果请求来自“ http://from.com ”或“ https://from.com ”，服务器会以“Access-Control-Allow-Origin”作为响应，告诉浏览器可以 POST|GET|ORIGIN。 由于服务器对它没问题，浏览器将发出第二个请求（这次是 POST）。 让您的客户端设置它发送的内容类型是一种很好的做法 - 因此您也需要允许这样做。
MDN 有一篇关于HTTP 访问控制的精彩文章，详细介绍了整个流程的工作原理。 根据他们的文档，它应该“在支持跨站点 XMLHttpRequest 的浏览器中工作”。 然而，这有点误导，因为我认为只有现代浏览器才允许跨域 POST。 我只在 safari、chrome、FF 3.6 上验证过这个。
如果您这样做，请记住以下几点：
如果您控制远程服务器，则可能应该使用 CORS，如本答案中所述； 它在 IE8 及更高版本以及所有最新版本的 FF、GC 和 Safari 中受支持。 （但在 IE8 和 9 中，CORS 不允许您在请求中发送 cookie。）
因此，如果您不控制远程服务器，或者您必须支持 IE7，或者您需要 cookie 而您必须支持 IE8/9，那么您可能需要使用 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和/或允许您在旧浏览器中发送跨域跨帧消息的众多库之一：
如果您不控制远程服务器，则无法读取 POST 期间的响应。 否则会导致安全问题。
伪代码
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 的样式，使其隐藏并绝对定位。 不确定浏览器是否允许跨站点发布，但如果是这样，这就是这样做的方法。
把事情简单化：
跨域POST：
使用crossDomain: true,
不应该刷新页面：
不，它不会刷新页面，因为当服务器发回响应时将调用success或error异步回调。
$.ajax({
type: "POST",
url: "http://www.yoururl.com/",
crossDomain: true,
data: 'param1=value1¶m2=value2',
success: function (data) {
// do something with server response data
},
error: function (err) {
// handle your error logic here
}
});
如果您有权访问所有涉及的服务器，请将以下内容放在其他域中请求的页面的回复标题中：
PHP：
header('Access-Control-Allow-Origin: *');
例如，在 Drupal 的 xmlrpc.php 代码中，您可以这样做：
function xmlrpc_server_output($xml) {
$xml = '<?xml version="1.0"?>'."\n". $xml;
header('Connection: close');
header('Content-Length: '. strlen($xml));
header('Access-Control-Allow-Origin: *');
header('Content-Type: application/x-www-form-urlencoded');
header('Date: '. date('r'));
// $xml = str_replace("\n", " ", $xml);
echo $xml;
exit;
}
这可能会产生安全问题，您应该确保采取适当的措施来验证请求。
检查http://taiyolab.com/mbtweet/scripts/twitterapi_call.js 中的post_method函数 - 上面描述的 iframe 方法的一个很好的例子。
创建两个隐藏的 iframe（在 css 样式中添加“display: none;”）。 使您的第二个 iframe 指向您自己域中的某些内容。
创建一个隐藏的表单，将它的方法设置为“post”，目标 = 你的第一个 iframe，并可选择将 enctype 设置为“multipart/form-data”（我认为你想做 POST，因为你想发送像图片这样的多部分数据？）
准备好后，使表单 submit() 成为 POST。
如果您可以让另一个域返回将与 Iframes 进行跨域通信的 javascript ( http://softwareas.com/cross-domain-communication-with-iframes )，那么您很幸运，您可以捕获响应以及。
当然，如果你想使用你的服务器作为代理，你可以避免这一切。 只需将表单提交到您自己的服务器，该服务器会将请求代理到另一台服务器（假设另一台服务器未设置为注意 IP 差异）、获取响应并返回您喜欢的任何内容。
还有一件很重要的事情要注意！！！ 在上面的例子中，它描述了如何使用
$.ajax({
type : 'POST',
dataType : 'json',
url : 'another-remote-server',
...
});
JQuery 1.6 及更低版本存在跨域 XHR 的错误。 根据 Firebug，除了 OPTIONS 之外没有其他请求被发送。 没有 POST。 在所有。
花了 5 个小时测试/调整我的代码。 在远程服务器（脚本）上添加大量标头。 没有任何影响。 但后来，我将 JQuery 库更新到了 1.6.4，一切都像魅力一样。
如果您想在 ASP.net MVC 环境中使用 JQuery AJAX 执行此操作，请按照以下步骤操作：（这是此线程提供的解决方案的摘要）
假设“caller.com”（可以是任何网站）需要发布到“server.com”（一个 ASP.net MVC 应用程序）
在“server.com”应用程序的 Web.config 上添加以下部分：
<httpProtocol> <customHeaders> <add name="Access-Control-Allow-Origin" value="*" /> <add name="Access-Control-Allow-Headers" value="Content-Type" /> <add name="Access-Control-Allow-Methods" value="POST, GET, OPTIONS" /> </customHeaders> </httpProtocol>在“server.com”上，我们将对要发布到的控制器（称为“主页”）执行以下操作：
[HttpPost] public JsonResult Save() { //Handle the post data... return Json( new { IsSuccess = true }); }然后从“caller.com”，将数据从表单（带有 html id“formId”）发布到“server.com”，如下所示：
$.ajax({ type: "POST", url: "http://www.server.com/home/save", dataType: 'json', crossDomain: true, data: $(formId).serialize(), success: function (jsonResult) { //do what ever with the reply }, error: function (jqXHR, textStatus) { //handle error } });还有一种方法（使用 html5 功能）。 您可以使用托管在该其他域上的代理 iframe，您使用 postMessage 向该 iframe 发送消息，然后该 iframe 可以执行 POST 请求（在同一域上）并通过 reposnse 将 postMessage 返回到父窗口。
sender.com 上的父母
var win = $('iframe')[0].contentWindow
function get(event) {
if (event.origin === "http://reciver.com") {
// event.data is response from POST
}
}
if (window.addEventListener){
addEventListener("message", get, false)
} else {
attachEvent("onmessage", get)
}
win.postMessage(JSON.stringify({url: "URL", data: {}}),"http://reciver.com");
recver.com 上的 iframe
function listener(event) {
if (event.origin === "http://sender.com") {
var data = JSON.parse(event.data);
$.post(data.url, data.data, function(reponse) {
window.parent.postMessage(reponse, "*");
});
}
}
// don't know if we can use jQuery here
if (window.addEventListener){
addEventListener("message", listener, false)
} else {
attachEvent("onmessage", listener)
}
高级.... 您需要在服务器上设置 cname，以便 other-serve.your-server.com 指向 other-server.com。
您的页面会动态创建一个不可见的 iframe，作为您到 other-server.com 的传输工具。 然后，您必须通过 JS 从您的页面到 other-server.com 进行通信，并通过回调将数据返回到您的页面。
可能，但需要与 your-server.com 和 other-server.com 协调
我认为最好的方法是将 XMLHttpRequest（例如 $.ajax()、$.post() 在 jQuery 中）与跨源资源共享 polyfill 之一一起使用https://github.com/Modernizr/Modernizr/wiki/HTML5-跨浏览器-Polyfills#wiki-CORS
我知道这是一个老问题，但我想分享我的方法。 我使用 cURL 作为代理，非常简单且一致。 创建一个名为 submit.php 的 php 页面，并添加以下代码：
<?
function post($url, $data) {
$header = array("User-Agent: " . $_SERVER["HTTP_USER_AGENT"], "Content-Type: application/x-www-form-urlencoded");
$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, $url);
curl_setopt($curl, CURLOPT_HTTPHEADER, $header);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($curl, CURLOPT_POST, 1);
curl_setopt($curl, CURLOPT_POSTFIELDS, $data);
$response = curl_exec($curl);
curl_close($curl);
return $response;
}
$url = "your cross domain request here";
$data = $_SERVER["QUERY_STRING"];
echo(post($url, $data));
然后，在您的 js（此处为 jQuery）中：
$.ajax({
type: 'POST',
url: 'submit.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.');
}
});
这是一个老问题，但一些新技术可能会帮助某人。
如果您对另一台服务器具有管理访问权限，那么您可以使用开源 Forge 项目来完成跨域 POST。 Forge 提供了一个跨域 JavaScript XmlHttpRequest 包装器，它利用了 Flash 的原始套接字 API。 POST 甚至可以通过 TLS 完成。
您需要对要发布到的服务器进行管理访问的原因是，您必须提供允许从您的域进行访问的跨域策略。
应该可以使用 YQL 自定义表 + JS XHR，请查看： http : //developer.yahoo.com/yql/guide/index.html
我用它来做一些客户端 (js) html 抓取，工作正常（我有一个完整的音频播放器，可以搜索互联网/播放列表/歌词/最后一个 fm 信息，所有客户端 js + YQL）
CORS 适合您。 CORS即“Cross Origin Resource Sharing”，是一种发送跨域请求的方式。现在XMLHttpRequest2和Fetch API都支持CORS，可以发送POST和GET请求
但是它有它的局限性。服务器需要具体声明Access-Control-Allow-Origin ，并且不能设置为'*'。
如果您希望任何来源都可以向您发送请求，则需要 JSONP（还需要设置Access-Control-Allow-Origin ，但可以是 '*'）
很多请求方式如果不知道怎么选择，我想你需要一个功能齐全的组件来做。让我介绍一个简单的组件https://github.com/Joker-Jelly/catta
如果您使用的是现代浏览器（> IE9、Chrome、FF、Edge等），非常推荐您使用一个简单但美观的组件https://github.com/Joker-Jelly/catta 。它没有依赖，Less超过 3KB，它支持 Fetch、AJAX 和 JSONP，具有相同的致命示例语法和选项。
catta('./data/simple.json').then(function (res) {
console.log(res);
});
它还支持导入到您的项目的所有方式，如 ES6 模块、CommonJS 甚至 HTML 中的<script> 。
如果您有权访问跨域服务器并且不想在服务器端进行任何代码更改，则可以使用名为 - 'xdomain' 的库。
这个怎么运作：
第一步：server 1：包含xdomain库并配置跨域为slave：
<script src="js/xdomain.min.js" slave="https://crossdomain_server/proxy.html"></script>
步骤2：在跨域服务器上，创建一个proxy.html文件并将服务器1作为主服务器：
proxy.html:
<!DOCTYPE HTML>
<script src="js/xdomain.min.js"></script>
<script>
xdomain.masters({
"https://server1" : '*'
});
</script>
第 3 步：
现在，您可以从 server1 对 proxy.html 作为端点进行 AJAX 调用。 这是绕过 CORS 请求。 该库在内部使用 iframe 解决方案，该解决方案适用于凭据和所有可能的方法：GET、POST 等。
查询ajax代码：
$.ajax({
url: 'https://crossdomain_server/proxy.html',
type: "POST",
data: JSON.stringify(_data),
dataType: "json",
contentType: "application/json; charset=utf-8"
})
.done(_success)
.fail(_failed)
如何使用JavaScript在跨域POST请求中发送JSON正文？
[英]How to send a JSON body in a cross-domain POST request with JavaScript?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.