如何通过 AJAX 将数据从外部站点发送到我的服务器？答案

【问题标题】：How to send data from outside site to my server via AJAX?如何通过 AJAX 将数据从外部站点发送到我的服务器？
【发布时间】：2012-03-02 20:00:57
【问题描述】：

我编写了小书签，它从站点获取图片和视频，并且必须通过 AJAX 将其发送到我的服务器。问题出在跨域 AJAX 请求中 - 我有一个错误：

XMLHttpRequest 无法加载 http://mysite.com/community/bookmarklet/。 Access-Control-Allow-Origin 不允许来源http://www.some-nice-site.com。

如何解决从第三方网站向我的服务器发送数据的问题？

注意：我只使用平面javascript，这是开发的规定。

我的代码：

function getXmlHttp(){
  var xmlhttp;
  if (typeof XMLHttpRequest!='undefined') {
    xmlhttp = new XMLHttpRequest();
  } else {      
    try {
      xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (E) {
        xmlhttp = false;
      }
    }  
  };  
  return xmlhttp;
};

function vote(data) {
  var req = getXmlHttp();
  req.onready = function() {
    if (req.readyState == 4 & req.status == 200) {
      alert('OK');
    }
  }
  req.open('GET', 'http://mydomain.com/community/bookmarklet/');
  req.send(JSON.stringify(data()));
};

function dataProcessing(){
  //some processing
  return data;
};

// I tried it, but not deeply understand.
function JSONPresponse(){
  document.getElementById('popup_body').innerHTML = 'done!';
};
(function(){
  function pasteIt(){
    // this function is builds the form, which get data for dispatch to my server.
  };

  pasteIt();
  document.getElementById('my_button').addEventListener('click', function()    {vote(dataProcessing)}, false);
}());

【问题讨论】：

一个棘手的技巧可能是使用隐藏的iframe 并将stringify-ed 文本附加到src URL。只是说..
您必须为此使用JSONP。
@jakeclarkson，是的 - 就是这样！
您必须动态创建一个<script> 元素并将其添加到您的页面，而不是使用XHR。 <script> 的 src 应该类似于 "http://ilya.beta.rebelmouse.com/community/bookmarklet?callback=JSONPresponse" 这样您的服务器就知道将其响应包含在什么 JS function 中。

标签： javascript ajax cross-domain

【解决方案1】：

很明显...您正在尝试的站点正在禁止来自外部世界的连接。您可以尝试修改请求中的 http 标头。见：

【讨论】：

【解决方案2】：

正如@jakeclarkson 所说 - JSON-P 是解决方案，不是唯一的，但对我有用。

不再需要 XMLHttpRequest。相反，它 vote(data) 函数创建脚本以使用参数构建 URL：

function vote(data) {
  var script = document.createElement('script'),
  data = JSON.stringify(data());
  script.type = 'text/javascript';
  script.src = 'http://mysite.com/api/bookmarklet/?vids='+encodeURIComponent(data);
  document.getElementsByTagName('head')[0].appendChild(script);
};

脚本已经完成，所以 URL 被调用并且参数已经在服务器中。

【讨论】：