跨域CORS


什么是跨域问题

在网页中使用AJAX时,AJAX请求的URL与网页的URL相比较,如果是属于同一个域名才可以正常访问,如果不属于一个域名就会出现跨域问题。所以,怎么判断两个URL是不是属于同一个域名呢?

比如一个网页的URL是"https://segmentfault.com/a/1190000011145364?aaa=666",可以把它拆分开:
origin: "https://segmentfault.com"
pathname: "/a/1190000011145364"
search: "?aaa=666"

只有当两个URL的origin完全相同时,才不会出现跨域问题。所以以下origin都会出现跨域问题:
子域名:https://abc.segmentfault.com
不同协议:http://segmentfault.com
不同端口:https://segmentfault.com:8080
IP地址:https://192.168.4.12

当出现跨域问题时,AJAX请求返回后浏览器控制台会报错,AJAX的回调拿不到返回值。

两种常用的解决方法:JSONP和CORS

JSONP

原理是利用浏览器允许跨域引用JavaScript资源。
发送请求时,通过URL告诉服务器函数名,如:http://some.com?callback=handle.
服务器的通常是函数调用的形式,如:

1
handle(data);

页面中需要先准备好函数handle

1
2
3
function handle(data){
	console.log(data);
}

CORS

这个方案好像不需要在JS代码中的额外操作。另外,默认情况下,Cookie不包括在CORS请求之中,如果需要请求中带着cookie,设置withCredentials参数即可。
阮一峰——跨域资源共享 CORS 详解

updatedupdated2020-10-122020-10-12