Access-Control-Allow-Origin不允许使用origin http:// localhost。

我有一个问题…我试图在“ http://api.master18.tiket.com/search/autocomplete/hotel?q=mah&token=90d2fad44172390b11527557e6250e50&secretkey=83e2f0484edbd2ad6fc9888c1e30ea44&output=json ”中获取json api

当我尝试离线模式(这意味着我在记事本中复制json API并在我的localhost中调用它)时使用此代码…

function getLast(){ $.ajax({ url:"http://localhost/tickets/json/api_airport.json", type:'GET', dataType:"json", success:function(data){console.log(data.results.result[1].category);} }); } 

它完美运行。:)

但当我尝试使用以下代码的真实url(“ http://api.master18.tiket.com/search/autocomplete/hotel?q=mah&token=90d2fad44172390b11527557e6250e50&secretkey=83e2f0484edbd2ad6fc9888c1e30ea44&output=json ”)时:

 $.ajax({ url:"http://api.master18.tiket.com/search/autocomplete/hotel?q=mah&token=90d2fad44172390b11527557e6250e50&secretkey=83e2f0484edbd2ad6fc9888c1e30ea44&output=json", type:'GET', crossDomain:true, beforeSend: function(x) { if(x && x.overrideMimeType) { x.overrideMimeType("application/j-son;charset=UTF-8"); } }, success:function(data){console.log("Success");} }); 

然后在我的谷歌浏览器javascript控制台中,出现如下错误:“XMLHttpRequest无法加载http://api.master18.tiket.com/search/autocomplete/hotel?q=mah&token=90d2fad44172390b11527557e6250e50&secretkey=83e2f0484edbd2ad6fc9888c1e30ea44&output=json 。原点( http) Access-Control-Allow-Origin不允许使用:// localhost 。“

我知道,它必须是跨域问题,有人可以帮助我吗? nb:一些代码,我从堆栈溢出社区得到….谢谢:)

你有两种方法可以继续:

JSONP


如果此API支持JSONP ,则解决此问题的最简单方法是在URL的末尾添加&callback 。 你也可以试试&callback= 。 如果这不起作用,则表示API不支持JSONP ,因此您必须尝试其他解决方案。

代理脚本


您可以在与您的网站相同的域上创建代理脚本,以避免跨源问题。 这仅适用于HTTP URL,而不适用于HTTPS URL,但如果您需要,则不应该太难修改。

  

然后你只需用jQuery调用这个脚本。 请务必对url进行urlencode

 $.ajax({ url : 'proxy.php?url=http%3A%2F%2Fapi.master18.tiket.com%2Fsearch%2Fautocomplete%2Fhotel%3Fq%3Dmah%26token%3D90d2fad44172390b11527557e6250e50%26secretkey%3D83e2f0484edbd2ad6fc9888c1e30ea44%26output%3Djson', type : 'GET', dataType : 'json' }).done(function(data) { console.log(data.results.result[1].category); // Do whatever you want here }); 

为什么


由于XMLHttpRequest相同的源策略,您收到此错误,这基本上归结为对具有不同端口,域或协议的URL的ajax请求的限制。 此限制适用于防止跨站点脚本(XSS)攻击。

更多信息

我们的解决方案以不同的方式传递这些问题。

JSONP使用能够将脚本标记指向JSON(包含在javascript函数中)以接收JSON。 JSONP页面被解释为javascript并执行。 JSON将传递给您指定的函数。

代理脚本通过欺骗浏览器来工作,因为您实际上是在请求与您的页面相同的源页面。 实际的跨源请求发生在服务器端。

我用一个简单的nginx代理修复了这个(用于开发)…

 # /etc/nginx/sites-enabled/default server { listen 80; root /path/to/Development/dir; index index.html; # from your example location /search { proxy_pass http://api.master18.tiket.com; } } 

彻底阅读jQuery AJAX跨域似乎表明您正在查询的服务器返回一个禁止跨域json请求的头字符串。 检查您收到的响应的标头,以查看是否设置了Access-Control-Allow-Origin标头,以及它的值是否限制了对本地主机的跨域请求。