分类导航

jQuery 发布时间：2022-04-19 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了jquery – 原始http：// localhost不允许Access-Control-Allow-Origin，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我有一个问题…我试图得到json api在“http://api.master18.tiket.com/search/autocomplete/hotel?q=mah\u0026amp;token=90d2fad44172390b11527557e6250e50\u0026amp;secretkey=83e2f0484edbd2ad6fc9888c1e30ea44\u0026amp;output=json”

当我尝试离线模式(这意味着我复制json API在记事本和调用它在我的本地主机)与此代码…@H_874_3@

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

它运行完美。@H_874_3@

但是当我尝试真实的url(“http://api.master18.tiket.com/search/autocomplete/hotel?q=mah\u0026amp;token=90d2fad44172390b11527557e6250e50\u0026amp;secretkey=83e2f0484edbd2ad6fc9888c1e30ea44\u0026amp;output=json”)与此代码：@H_874_3@

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

然后在我的google chrome javascript控制台，有一个这样的错误：
“XMLhttp request无法加载http://api.master18.tiket.com/search/autocomplete/hotel?q=mah&token=90d2fad44172390b11527557e6250e50&secretkey=83e2f0484edbd2ad6fc9888c1e30ea44&output=json.原因(http：// localhost)不允许Access-Control-Allow-Origin。@H_874_3@

我知道，它一定是跨域的问题，有人可以帮我吗？
nb：一些代码，我从堆栈溢出社区….谢谢:)@H_874_3@

解决方法

你有两种方式前进：

JSONP@H_874_3@

如果此API支持JSONP，则解决此问题的最简单方法是将& callBACk添加到网址的末尾。您也可以尝试& callBACk =。如果这不工作，这意味着API@L_673_14@JSONP，因此您必须尝试其他解决方案。@H_874_3@

代理脚本@H_874_3@

您可以在与您的网站相同的域上创建代理脚本，以避免跨源问题。这只适用于http网址，而不适用于httpS网址，但如果您需要的话，修改不应太难。@H_874_3@

<?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编码。@H_874_3@

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

为什么@H_874_3@

您收到此错误是因为XMLhttp request同源策略，这基本上归结为对具有不同端口，域或协议的URL的ajax请求的限制。这种限制是为了防止跨站点脚本(XSS)攻击。@H_874_3@

More Information@H_874_3@

我们的解决方案通过不同的方式传递这些问题。@H_874_3@

JSONP使用能够点击JSON上的脚本标签(包含在javascript函数中)，以便接收JSON。 JSONP页面被解释为Javascript，并执行。 JSON被传递到您指定的函数。@H_874_3@

代理脚本的工作原理是欺骗浏览器，因为您实际上请求的网页与您的网页的源代码相同。实际的跨源请求在服务器端发生。@H_874_3@