MooTools CORS 请求与原生 Javascript

Posted 2023-03-03

【中文标题】MooTools CORS 请求与原生 Javascript

【英文标题】：MooTools CORS request vs native Javascript

【发布时间】：2013-08-29 00:20:27

【问题描述】：

我有这个 MooTools 代码：

new Request.JSON(
  method: 'POST',
  url: URL, /*URL TO ANOTHER DOMAIN*/
  onSuccess: function(r)
    callback(r);
  
).post(data);

并且此代码不发送 POST 请求（仅限 OPTIONS）... 看看下面的代码（效果很好）：

var http = null,
  params = Object.toQueryString(data);
try 
  http = new XMLHttpRequest();
 catch (e) 
  try 
    http = new ActiveXObject("Msxml2.XMLHTTP");
   catch (e) 
    try 
      http = new ActiveXObject("Microsoft.XMLHTTP");
     catch (e) 
      http = null;
      alert("Your browser does not support AJAX!");
    
  

var url = URL;
http.onreadystatechange = function () 
  if (http.readyState == 4 && http.status == 200) 
    var jsonData = JSON.parse(http.responseText); /*OR EVAL*/
    callback(jsonData);
  
;
http.open("POST", url);
http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
http.send(params);

编辑：

已尝试：.setHeader('Content-Type','application/x-www-form-urlencoded'); 还是什么都没有……哪里有问题？

谢谢！

【问题讨论】：

如果它发送一个 OPTIONS 请求，那听起来像 CORS preflight request，这表明您在跨站点请求中使用了非简单请求标头。您的非 Mootools 代码集 Content-type: application/x-www-form-urlencoded，但您的 Mootools 代码可能没有。

尝试在您的 mootools 请求中设置选项 headers。

试过：.setHeader('Content-Type','application/x-www-form-urlencoded');还是什么都没有……哪里有问题？

【参考方案1】：

这是因为 MooTools 将一些额外的内容与请求标头捆绑在一起。

例如。如果你的 htaccess 说：

Header set Access-Control-Allow-Origin: *

您需要像这样制作您的请求：

var foo = new Request(
    url: 'http://fragged.org/Epitome/example/data/',
    method: 'get',
    onComplete: function (data) 
        // returns an object with name and surname  
        new Element('div[html="name surname"]'.substitute(JSON.decode(data))).inject(document.body);
    
);

// need to remove that or CORS will need to match it specifically
delete foo.headers['X-Requested-With'];
foo.send();    

这就是为什么您只能在飞行前看到 OPTIONS。它不喜欢你:)

您可以将.htaccess 更改为也匹配X-Requested-With，这可能是一些额外的“安全性”。

请参阅 http://jsfiddle.net/7zUSu/1/ 以获取工作示例 - 不久前，当我想对请求 https://github.com/mootools/mootools-core/issues/2381 进行此更改时，我这样做了。

【讨论】：

一如既往的好答案！谢谢。

我不知道该怎么感谢你；这很可能为我节省了几个小时的头发拉扯时间。

【参考方案2】：

您所说的（仅选项）是什么意思？两个示例都发送 POST 请求，唯一的区别在于 Accept 请求标头。

MooTools 发送Accept: application/json，而本机发送Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8。

这可能会影响服务器的响应方式。