jQuery Access-Control-Allow-Origin 不允许 Origin http://localhost。？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12683530/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Origin http://localhost is not allowed by Access-Control-Allow-Origin.?
提问by Gregorius Airlangga
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中的“ http://api.master18.tiket.com/search/autocomplete/hotel?q=mah&token=90d2fad44172390b11527557e6250e50&secretkey=83e2f0484edbd2ad6fc9888c1e30ea44&output=json”
when i try to offline mode(this means i copy that json API in notepad and call it in my localhost) with this code...
当我尝试离线模式时（这意味着我在记事本中复制该 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);}
});
}
it runs perfectly.:)
它运行完美。:)
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:
但是当我尝试使用真实网址时（“ http://api.master18.tiket.com/search/autocomplete/hotel?q=mah&token=90d2fad44172390b11527557e6250e50&secretkey=83e2f0484edbd2ad6fc98884c1ewith "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");}
});
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."
然后在我的谷歌浏览器的JavaScript控制台，有这样的错误：“XMLHttpRequest的无法加载http://api.master18.tiket.com/search/autocomplete/hotel?q=mah&token=90d2fad44172390b11527557e6250e50&secretkey=83e2f0484edbd2ad6fc9888c1e30ea44&output=json产地（HTTP ://localhost) 不被 Access-Control-Allow-Origin 允许。”
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 :)
我知道，这一定是跨域问题，有人可以帮助我吗？nb：一些代码，我从堆栈溢出社区得到....谢谢:)
回答by Nathaniel
You've got two ways to go forward:
你有两种方法可以前进：
JSONP
JSONP
If this API supports JSONP, the easiest way to fix this issue is to add &callbackto 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.
如果此 API 支持JSONP，则解决此问题的最简单方法是添加&callback到 URL 的末尾。你也可以试试&callback=。如果这不起作用，则意味着该 API 不支持JSONP，因此您必须尝试其他解决方案。
Proxy Script
代理脚本
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.
您可以在与您的网站相同的域上创建代理脚本，以避免跨域问题。这仅适用于 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
Then you just call this script with jQuery. Be sure to urlencodethe URL.
然后你只需用 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
});
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.
由于 XMLHttpRequest 同源策略，您收到此错误，这基本上归结为限制对具有不同端口、域或协议的 URL 的 ajax 请求。此限制是为了防止跨站点脚本 (XSS) 攻击。
Our solutions by pass these problems in different ways.
我们的解决方案以不同的方式绕过这些问题。
JSONPuses 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.
JSONP使用将脚本标签指向 JSON（封装在 javascript 函数中）的功能，以便接收 JSON。JSONP 页面被解释为 javascript 并执行。JSON 将传递给您指定的函数。
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.
代理脚本通过欺骗浏览器来工作，因为您实际上是在请求与您的页面同源的页面。实际的跨域请求发生在服务器端。
回答by jmervine
I fixed this (for development) with a simple nginx proxy...
我用一个简单的 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;
}
}
回答by Ben West
a thorough reading of jQuery AJAX cross domainseems to indicate that the server you are querying is returning a header string that prohibits cross-domain json requests. Check the headers of the response you are receiving to see if the Access-Control-Allow-Origin header is set, and whether its value restricts cross-domain requests to the local host.
对jQuery AJAX 跨域的彻底阅读似乎表明您正在查询的服务器正在返回一个禁止跨域 json 请求的标头字符串。检查您收到的响应的标头以查看是否设置了 Access-Control-Allow-Origin 标头，以及它的值是否将跨域请求限制到本地主机。
