跨域资源共享CORS的那些事（一）

最近在为高性能开源API网关apisix写跨域插件，发现该功能对协议要求要比较熟悉，借此机会重新复习下跨域协议，以及简要写下跨域功能的设计

什么是跨域？

同源政策

在讲跨域之前，反过来想，什么时候是不跨域，也就是所谓的什么是同源？

1995年，同源政策由 Netscape 公司引入浏览器。目前，所有浏览器都实行这个政策。

最初，它的含义是指，A网页设置的 Cookie，B网页不能打开，除非这两个网页”同源”。所谓”同源”指的是”三个相同”。

• 协议相同
• 域名相同
• 端口相同

举个栗子，http://www.example.com/dir/page.html ，协议是http:// ，域名是 www.example.com，端口是80（默认端口可以省略）。在该页面下，若访问相关页面资源，那么它的同源情况如下。

http://www.example.com/dir2/other.html：同源
http://example.com/dir/other.html：不同源（域名不同）
http://v2.www.example.com/dir/other.html：不同源（域名不同）
http://www.example.com:81/dir/other.html：不同源（端口不同）

这里的不同源，也就是跨域。

跨域存在的风险

为什么要区分同源和跨域呢？同源政策（跨域）的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。

设想这样一种情况：A网站是一家银行，用户登录以后，又去浏览其他网站。如果其他网站可以读取A网站的 Cookie，会发生什么？

很显然，如果 Cookie 包含隐私（比如存款总额），这些信息就会泄漏。更可怕的是，Cookie 往往用来保存用户的登录状态，如果用户没有退出登录，其他网站就可以冒充用户，为所欲为。因为浏览器同时还规定，提交表单不受同源政策的限制。

由此可见，”同源政策”是必需的

同源政策的限制范围

随着互联网的发展，浏览器的”同源政策”越来越严格。现在通常有如下三点

1. Cookie、LocalStorage 和 IndexDB 无法读取。
2. DOM 无法获得。
3. AJAX 请求不能发送。

可以简单理解为，浏览器执行javascript脚本时，会检查这个脚本属于哪个页面，如果不是同源页面，就不会被执行。

那这样，js脚本访问的资源只能使用本站的资源，这样显然不合适，所以就衍生出一些解决办法，通常有三种：

1. JSONP：JSONP只支持GET请求
2. 代理：例如www.123.com/index.htm l需要调用www.456.com/server.php ，可以写一个接口www.123.com/server.cgi ，由这个接口在后端去调用www.456.com/server.php 并拿到返回值，然后再返回给index.html ，这就是一个代理的模式。相当于绕过了浏览器端，自然就不存在跨域问题。
3. SERVER端支持CORS。即处理请求时，要求请求符合CORS规范，增加Origin等字段，并解析判断返回响应中Access-Control-Allow-Origin、Access-Control-Allow-Method等字段，来判断非同源场景下，其他站点的资源能否使用

最后

以上就是多情河马为你收集整理的跨域资源共享CORS的那些事（一）跨域资源共享CORS的那些事（一）的全部内容，希望文章能够帮你解决跨域资源共享CORS的那些事（一）跨域资源共享CORS的那些事（一）所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。