跨域资源共享CORS学习笔记

跨域资源共享CORS学习笔记

1、同源政策

含义

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 往往用来保存用户的登录状态，如果用户没有退出登录，其他网站就可以冒充用户，为所欲为。因为浏览器同时还规定，提交表单不受同源政策的限制。

由此可见，”同源政策”是必需的，否则 Cookie 可以共享，互联网就毫无安全可言了。

限制范围

随着互联网的发展，”同源政策”越来越严格。目前，如果非同源，共有三种行为受到限制。

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

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

对于它通常有三种解决办法：

1. JSONP：JSONP只支持GET请求
2. 代理：例如www.123.com/index.html需要调用www.456.com/server.php，可以写一个接口www.123.com/server.cgi，由这个接口在后端去调用www.456.com/server.php并拿到返回值，然后再返回给index.html，这就是一个代理的模式。相当于绕过了浏览器端，自然就不存在跨域问题。
3. SERVER端支持CORS，即增加对Origin等字段判断，返回响应是增加Access-Control-Allow-Origin、Access-Control-Allow-Method等字段

代理方法比较清晰，是直接通过先访问同源后端接口，通过后端接口去访问跨域资源，也就不会存在跨域的问题（跨域的问题仅存在于，浏览器执行javascript脚本时）

但代理模式也有比较明显的缺点，比如如果浏览器访问的页面需要访问的域名的资源是不断变化，那么使用代理模式就要频繁改动代码，扩展性很差，所以并不是一个好的选择。

JSONP:jsonp（json width padding）是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于service.example.com的网页无法与不是service2.example.com的服务器沟通，而HTML的script元素是一个列外。利用script圆度开放策略，网页可以等到从其他源动态产生的JSON资料，而这种使用模式就是所谓的JSONP。用JSONP抓到的资料并不是JSON，而是任意的Javascript，用javascript直译器执行而不是用JSON解析器解析。

但JSONP有几个问题，一是要求客户必须限制使用JSONP，这个方案并不是后端SERVER支持跨域；二则是JSONP只支持GET方法。

JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据。

这里总结下上面的内容：如果用户使用不支持跨域的APIGW作为中间件连接后端server，那么是无法通过浏览器访问后端server的，基本就代表着使用qcloud APIGW完成的代码，无法使用浏览器。。包括桌面浏览器、移动浏览器以及APP内置使用的webview均无法使用

CORS与JSONP的使用目的相同，但是比JSONP更强大。这里着重介绍下CORS跨域资源共享

2、跨域资源共享

定义

跨来源资源共享（Cross-Origin Resource Sharing（CORS））是一种使用额外HTTP标头来让目前浏览网站的user agent能获得访问不同来源（网域）服务器特定资源之权限的机制。当user agent请求一个不是目前文件来源——来自于不同网域（domain）、通信协定（protocol）或通信端口（port）的资源时，会建立一个跨来源HTTP请求（cross-origin HTTP request）。

基于安全性考虑，浏览器和WebView发出的HTTP请求会有限制。例如，XMLHttpRequest及Fetch皆遵守同源政策（same-origin policy）。这代表网络应用程序所使用的这些API只能请求来自和应用程序相同网域的HTTP资源，除非使用了CORS标头。

哪些请求会使用到CORS?

1. 使用XMLHttpRequest或Fetch API进行跨站请求，如前所述。
2. 网页字体（跨网域CSS的@font-face的字体用途），所以服务器可以