小编典典

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

ajax

我有问题…我尝试在
http://api.master18.tiket.com/search/autocomplete/hotel?q=mah
&token=90d2fad44172390b11527557e6250e50&secretkey=83e2f0484edbd2ad6fc9888c1e30ea44&output=json

“中 获取json api

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

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);}
        });
    }

它运行完美。

但是,当我尝试使用以下代码对真正的网址(“
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
:// localhost
)是Access-Control-Allow-Origin所不允许的。”

我知道这一定是跨域问题,有人可以帮助我吗?nb:一些代码,我来自堆栈溢出社区....谢谢:)


阅读 683

收藏
2020-07-26

共1个答案

小编典典

您有两种前进的方式:

JSONP


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

代理脚本


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

<?php
// File Name: proxy.php
if (!isset($_GET['url'])) {
    die(); // Don't do anything if we don't have a URL to work with
}
$url = urldecode($_GET['url']);
$url = 'http://' . str_replace('http://', '', $url); // Avoid accessing the file system
echo file_get_contents($url); // You should probably use cURL. The concept is the same though

然后,您只需使用jQuery调用此脚本即可。确保urlencode输入URL。

$.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具有相同的原始策略,因此会出现此错误,基本上可以归结为将ajax请求限制为具有不同端口,域或协议的URL。设置此限制是为了防止跨站点脚本(XSS)攻击。

更多信息

我们的解决方案通过不同方式解决了这些问题。

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

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

2020-07-26