Access-Control-Allow-Origin 不允许 Origin http://localhost.? [英] Origin http://localhost is not allowed by Access-Control-Allow-Origin.?

问题描述

我有问题...我尝试在 " 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 并在我的本地主机中调用它)使用此代码...

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

它运行得很好.:)

但是当我尝试使用真实网址时(http://api.master18.tiket.com/search/autocomplete/hotel?q=mah&token=90d2fad44172390b11527557e6250e50&secretkey=83e2f0484edbd2880=44172390b11527557e6250e50&secretkey=83e2f0484edbd2880=4camp3>") 使用此代码:

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

然后在我的 google chrome javascript 控制台中，出现如下错误:"XMLHttpRequest 无法加载 httpebd2ad81fc90000000000"://api.master18.tiket.com/search/autocomplete/hotel?q=mah&token=90d2fad44172390b11527557e6250e50&secretkey=83e2f0484edbd2ad6fc9888c1e30ea44rel="noreferrer">http://localhost) 不被 Access-Control-Allow-Origin 允许."

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."

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

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，解决此问题的最简单方法是将 &callback 添加到 URL 的末尾.您也可以尝试 &callback=.如果这不起作用，则表示该 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 网址，但如果您需要修改它应该不会太难.

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 调用这个脚本.一定要urlencode URL.

Then you just call this script with jQuery. Be sure to urlencode the 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 同源策略，这基本上归结为限制对具有不同端口、域或协议的 URL 的 ajax 请求.此限制是为了防止跨站点脚本 (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 使用将脚本标签指向 JSON(封装在 javascript 函数中)的功能以接收 JSON.JSONP 页面被解释为 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.

这篇关于Access-Control-Allow-Origin 不允许 Origin http://localhost.?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！