如何使用XMLHttpRequest(jQuery Ajax)绕过”Access-Control-Allow-Origin”错误
如果你是一个好奇的开发人员, 那么你可能已经面临(或将要面临)跨域/同源政策。此政策规定, 你无法从你自己的域以外的其他域检索信息(www.mydomain.com无法执行对www.otherdomain.com的异步调用)。幸运的是, 有一个名为CORS Anywhere的免费代理服务器, 该服务器将CORS标头添加到代理请求中。
解为了使用javascript轻松解决此问题, 我们将像往常一样使用XMLHttpRequest或jQuery ajax发出ajax请求, 但我们将使用cors-anywhere服务, 这使我们可以绕过此问题。 CORS Anywhere是一个NodeJS反向代理, 它将CORS标头添加到herokuapp中托管的代理请求中。
代理的URL实际上是从路径中获取, 经过验证和代理的。代理URI的协议部分是可选的, 默认为”
http”
。如果指定了端口443, 则协议默认为”
https”
。除cookie之外, 此程序包对http方法或标头没有任何限制。不允许请求用户凭据。
你只需要在请求URL https://cors-anywhere.herokuapp.com上添加前缀即可解决问题。
jQuery的
// In this example, if you make an ajax request to the following websitevar myUrl = 'http://www.geoplugin.net/json.gp?ip=216.58.209.68';
//But if you make it from a browser, then it will work without problem ...// However to make it work, we are going to use the cors-anywhere free service to bypass thisvar proxy = 'https://cors-anywhere.herokuapp.com/';
$.ajax({// The proxy url expects as first URL parameter the URL to be bypassed// https://cors-anywhere.herokuapp.com/{my-url-to-bypass}url: proxy + myUrl, complete:function(data){console.log(data);
}});
或使用$ .get, $。getJSON或$ .post的快捷方式:
var myUrl = 'http://www.geoplugin.net/json.gp?ip=216.58.209.68';
var proxy = 'https://cors-anywhere.herokuapp.com/';
var finalURL = proxy + myUrl;
// With the get JSON (frequently used) method$.getJSON(finalURL, function( data ) {console.log(data);
});
// With the get method$.get(finalURL, function( data ) {console.log(data);
});
// With the post method$.post(finalURL, function( data ) {console.log(data);
});
XMLHttpRequest
// In this example, if you make an ajax request to the following websitevar myUrl = 'http://www.geoplugin.net/json.gp?ip=216.58.209.68';
//But if you make it from a browser, then it will work without problem ...// However to make it work, we are going to use the cors-anywhere free service to bypass thisvar proxy = 'https://cors-anywhere.herokuapp.com/';
// Execute requestvar oReq = new XMLHttpRequest();
oReq.addEventListener("load", function () {console.log(this.responseText);
});
// Or post, etcoReq.open("GET", proxy + myUrl);
oReq.send();
这种方法只有两个局限性:
- 不代理Cookie
- 不允许请求用户凭据
推荐阅读
- 如何防止修改JavaScript中的对象并防止它们在控制台中访问
- 鸿蒙初体验-五子棋
- 在校生下午试题60分通过软考网工经验谈!
- 预告(2009年下半年软考试题及答案51CTO将实时发布)
- iOS开发面试只需知道这些,技术基本通关!(内存管理篇)
- 十年磨一剑 我的十年IT感言
- 软考,我该怎么对待你
- 谈谈网工考试的价值
- 软考网工难点分析之三 CRC循环冗余校验