产地HTTP：//本地主机不受访问控制 - 允许 - 产地允许的？ [英] Origin http://localhost is not allowed by Access-Control-Allow-Origin.?

问题描述

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

i have a problem... i try to get json api in "http://api.master18.tiket.com/search/autocomplete/hotel?q=mah&token=90d2fad44172390b11527557e6250e50&secretkey=83e2f0484edbd2ad6fc9888c1e30ea44&output=json"

当我尝试脱机模式下（这意味着我复制在记事本JSON API，并呼吁它在我的本地主机）与此code ...

when i try to offline mode(this means i copy that json API in notepad and call it in my localhost) with this code...

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

运行完美：。）

it runs perfectly.:)

但是当我尝试真正的网址("http://api.master18.tiket.com/search/autocomplete/hotel?q=mah&token=90d2fad44172390b11527557e6250e50&secretkey=83e2f0484edbd2ad6fc9888c1e30ea44&output=json")与此code：

but when i try to real url ("http://api.master18.tiket.com/search/autocomplete/hotel?q=mah&token=90d2fad44172390b11527557e6250e50&secretkey=83e2f0484edbd2ad6fc9888c1e30ea44&output=json") with this code:

$.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控制台，有这样的错误： XMLHtt prequest无法加载<一个href="http://api.master18.tiket.com/search/autocomplete/hotel?q=mah&token=90d2fad44172390b11527557e6250e50&secretkey=83e2f0484edbd2ad6fc9888c1e30ea44&output=json">http://api.master18.tiket.com/search/autocomplete/hotel?q=mah&token=90d2fad44172390b11527557e6250e50&secretkey=83e2f0484edbd2ad6fc9888c1e30ea44&output=json.原产地（HTTP：//本地主机）。没有被允许访问控制 - 允许 - 起源

then in my google chrome javascript console,there is an error like this : "XMLHttpRequest cannot load http://api.master18.tiket.com/search/autocomplete/hotel?q=mah&token=90d2fad44172390b11527557e6250e50&secretkey=83e2f0484edbd2ad6fc9888c1e30ea44&output=json. Origin (http://localhost) is not allowed by Access-Control-Allow-Origin."

我知道，它必须是跨域问题，有人可以帮我吗？ 注：几张code，我从堆栈溢出社会得到了....谢谢：）

i know, it must be cross domain problem, can someone help me? nb:some pieces of code, i got from stack overflow community....thank you :)

推荐答案

您已经有了两种方式前进：

You've got two ways to go forward:

如果此API支持 JSONP ，来解决这个问题最简单的方法是添加＆放大器;回调的URL的结束。您也可以尝试＆放大器;回调= 。如果不工作，这意味着API不支持 JSONP ，所以你必须尝试其他的解决方案。

If this API supports JSONP, the easiest way to fix this issue is to add &callback to the end of the URL. You can also try &callback=. If that doesn't work, it means the API does not support JSONP, so you must try the other solution.

您可以以避免跨域问题上创建同一个域中的网站上的代理脚本。这只会与HTTP网址，而不是HTTPS URL的工作，但如果你需要，它应该不会太难以修改。

You can create a proxy script on the same domain as your website in order to avoid the cross-origin issues. This will only work with HTTP URLs, not HTTPS URLs, but it shouldn't be too difficult to modify if you need that.

<?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。请务必 urlen code 的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
});

的为什么

---

你得到，因为XMLHtt prequest同源策略，这基本上可以归结为Ajax请求的URL来使用不同的端口，域或协议的限制，这个错误。这项限制的地方，prevent跨站点脚本（XSS）攻击。

The Why

---

You're getting this error because of XMLHttpRequest same origin policy, which basically boils down to a restriction of ajax requests to URLs with a different port, domain or protocol. This restriction is in place to prevent cross-site scripting (XSS) attacks.

更多信息

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

Our solutions by pass these problems in different ways.

JSONP 使用指向script标签的JSON（包装在一个javascript函数），以获得JSON的能力。该JSONP页面间preTED为JavaScript和执行。该JSON传递到你指定的功能。

JSONP uses the ability to point script tags at JSON (wrapped in a javascript function) in order to receive the JSON. The JSONP page is interpreted as javascript, and executed. The JSON is passed to your specified function.

代理脚本通过欺骗浏览器，你实际上请求页面上的相同起源页面。实际的跨域请求发生服务器端。

The proxy script works by tricking the browser, as you're actually requesting a page on the same origin as your page. The actual cross-origin requests happen server-side.

这篇关于产地HTTP：//本地主机不受访问控制 - 允许 - 产地允许的？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！