解决跨域问题
跨域问题
在浏览器端进行 Ajax 请求时会出现跨域问题,那么什么是跨域,如何解决跨域呢?先看浏览器端出现跨域问题的现象,如下图所示
测试跨域问题的代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<button onclick="ajaxRequest()">测试 Ajax 请求</button>
<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script>
function ajaxRequest() {
$.ajax({
type: "get",
url: "http://localhost:8500/api/v1/channel/data",
async: true,
success: function(data) {
console.log(data.status);
}
});
}
</script>
</body>
</html>
什么是跨域问题?
跨域,指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对 JavaScript 施加的安全限制。
什么是同源?
所谓同源是指,域名,协议,端口均相同
- http://www.lusifer.cc --> http://admin.lusifer.cc 跨域
- http://www.lusifer.cc --> http://www.lusifer.cc 非跨域
- http://www.lusifer.cc --> http://www.lusifer.cc:8080 跨域
- http://www.lusifer.cc --> https://www.lusifer.cc 跨域
使用 CORS(跨资源共享)解决跨域问题
CORS 是一个 W3C 标准,全称是"跨域资源共享"(Cross-origin resource sharing)。
它允许浏览器向跨源服务器,发出 XMLHttpRequest 请求,从而克服了 AJAX 只能同源使用的限制。
CORS 简介
CORS 需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能,IE 浏览器不能低于 IE10
整个 CORS 通信过程,都是浏览器自动完成,不需要用户参与。对于开发者来说,CORS 通信与同源的 AJAX 通信没有差别,代码完全一样。浏览器一旦发现 AJAX 请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感觉
因此,实现 CORS 通信的关键是服务器。只要服务器实现了 CORS 接口,就可以跨源通信
与 JSONP 的比较
CORS 与 JSONP 的使用目的相同,但是比 JSONP 更强大。
JSONP 只支持 GET 请求,CORS 支持所有类型的 HTTP 请求。JSONP 的优势在于支持老式浏览器,以及可以向不支持 CORS 的网站请求数据。