mootools 请求类和 CORS

Posted 2023-03-04

【中文标题】mootools 请求类和 CORS

【英文标题】：mootools Request class and CORS

【发布时间】：2012-04-07 12:03:12

【问题描述】：

我正在尝试使用 CORS 让脚本向地名发出 Ajax 请求。 我的脚本调用了这个网络服务方法：http://www.geonames.org/export/web-services.html#findNearby

如果您检查示例调用的响应标头，它们包括： 访问控制允许来源：*

当我使用 mootools（刚刚下载的 1.4.5 版）尝试此操作时：

var urlGeonames = "http://api.geonames.org/findNearbyPlaceName";
var req = new Request(
  method: 'get',
  url: urlGeonames,
  data: 
'lat': '89.18',
'lng': '-0.37',
'username': 'myusername',
'radius': '5'
  
).send();

然后我收到一条错误消息：

XMLHttpRequest cannot load
http://api.geonames.org/findNearbyPlaceName?lat=89.18&lng=-0.37&username=myusername&radius=5. 
Origin http://127.0.0.1 is not allowed by Access-Control-Allow-Origin.</pre>

另一方面，当我尝试这样的旧式 Ajax 代码时：

invocation = new XMLHttpRequest();
if(invocation)
     
  invocation.open('GET', urlFlickr, true);
  invocation.onreadystatechange = handler;
  invocation.send(); 
 

然后它工作了，我在 XHR responseXML 中得到了 XML 响应。

我发现这个帖子A CORS POST request works from plain javascript, but why not with jQuery? 是相似的。但是这里我不是在处理我的服务器，所以我只能在 javascript 端工作。

有没有人使用过 CORS 和 mootools 并且可以帮助解决这个问题？ 非常感谢 杰米

【问题讨论】：

顺便说一句，这个网站和 API 太棒了！！！几个月前我才发现它。如果您需要有关以下答案的其他帮助，请告诉我。

【参考方案1】：

嘿伙计，查看 mootools 更多 JSONP 这将解决您的问题：

http://mootools.net/docs/more/Request/Request.JSONP

另外，您似乎忘记从 geonames.org 以 JSON 格式要求它

尝试类似：

var myJSONP = new Request.JSONP(
    url: 'http://api.geonames.org/findNearbyPlaceNameJSON',
    data: 
       'lat': '89.18',
       'lng': '-0.37',
       'username': 'myusername'
    ,
    onRequest: function(url)
        // a script tag is created with a src attribute equal to url
    ,
    onComplete: function(data)
       // the request was completed.
       console.log(data);
    
).send();

希望这会有所帮助！

【参考方案2】：

在另一个线程上的第一个答案： MooTools CORS request vs native Javascript

可能会有帮助。

基本上，Mootools 会随请求自动发送 X-Requested-With 标头，但必须将服务器配置为接受该标头，或者您可以使用

将其删除

delete foo.headers['X-Requested-With'];

打电话之前

foo.send();

要让服务器允许，您可以将其添加到返回 JSON 数据的脚本的 .htaccess 文件中：

Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept"

所以你的看起来像：

var myJSON = new Request(
    url: 'http://api.geonames.org/findNearbyPlaceNameJSON',
    data: 
       'lat': '89.18',
       'lng': '-0.37',
       'username': 'myusername'
    ,
    onRequest: function(url)
        // a script tag is created with a src attribute equal to url
    ,
    onComplete: function(data)
       // the request was completed.
       console.log(data);
    
);
delete myJSON.headers['X-Requested-With'];
myJSON.send();