【问题标题】：Origin http://localhost is not allowed by Access-Control-Allow-Origin.?Access-Control-Allow-Origin 不允许来源 http://localhost。？
【发布时间】：2012-09-22 21:46:51
【问题描述】：

我有一个问题...我尝试在 "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");}
        });

然后在我的 google chrome javascript 控制台中，出现如下错误： “XMLHttpRequest 无法加载 http://api.master18.tiket.com/search/autocomplete/hotel?q=mah&token=90d2fad44172390b11527557e6250e50&secretkey=83e2f0484edbd2ad6fc9888c1e30ea44&output=json。Access-Control-Allow-Origin 不允许来源 (http://localhost)。”

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

【问题讨论】：

标签： jquery ajax json api

【解决方案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该网址。

$.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) 攻击。

More Information

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

JSONP 使用将脚本标签指向 JSON（包装在 javascript 函数中）的能力来接收 JSON。 JSONP 页面被解释为 javascript，并被执行。 JSON 被传递给您指定的函数。

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

【讨论】：

我已经在使用 &callback=?但有相同的...这意味着 api 不能支持 jsonp :)
是的，所以试试代理脚本:)
嘿朋友...代理脚本运行良好...非常感谢...哇哦！！！ :)
只包含 PHP 的页面不需要?> 标签。其实是discouraged
我正在使用 django-rest-framework，只是尝试了 json-p 的方式，但它不起作用。我想尝试代理脚本，但我需要一个在 django 中而不是在 PHP 中的脚本。有人准备好用了吗？

【解决方案2】：

我用一个简单的 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;
  }
}

【讨论】：

【解决方案3】：

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

【讨论】：