跨域资源共享 CORS.pdfVIP

目 录 0. 开始 1. 从跨域到 CORS 2. CORS 进阶之 Preflight 请求 3. CORS 进阶之设置请求头信息 4. CORS 进阶之 cookie 处理 5. CORS 进阶之 Expose-Headers 本文档使用 看云 构建 - 2 - 0. 开始 0. 开始 0. 开始 跨域资源共享 CORS 什么是浏览器跨域 ，如何解决跨域问题 ，什么是 CORS ？从入门到精通。 原文发布于我的个人博客 ：https// 源码位于 ：https///yinsigan/cors-tutorial 电子版 PDF Mobi ePbu 联系我 email hfpp2012@ qq 903279182 本文档使用 看云 构建 - 3 - 1. 从跨域到 CORS 1. 从跨域到 CORS 1. 从跨域到 CORS 1. 介绍 跨域 ，可能很多前端开发者都会遇到过 ，也可能知道有jsonp ，iframe之类的跨域方法。不过要说这些方 法之前 ，先得来说说什么叫跨域 ，为什么要跨域。 所谓跨域 ，顾名思义 ，跨到了另外的域 ，域不仅仅指的是不同的域名网站 ，可能同一个域名不同的端口号 也算不同的域。浏览器是有规则的 ，只要协议、域名、端口有任何一个不同 ，都被当作是不同的域。协议 指的是http ，或者https等。 下面给出一个列表 ，指出不同域的情况 ： 这个叫浏览器的同源策略(same-origin policy) ，为什么要这样规定呢 ，原因之一就是为了安全。 假如你在A网站 ，用一段js脚本就能访问B网站 ，B网站凭什么让你访问 ，为什么浏览器能让你随便访问别 的网站呢 ，说不定B网站存在着各种危险 ，比如盗取你的密码 ，跨域攻击(CSRF)等 ，一切都不太合理。 但也是有例外的情况 ，有些情况是要访问到别的网站的 ，比如加载一张图片 ，这张图片可能在别的网站 ， 还有加载一个js文件 ，也是有可能在别的网站的 ，还有嵌入一个frame元素 ，也可以访问到别的网站的内 容。 所以跨域正是利用了上面几点 ，比如jsonp就是利用的加载js文件的功能 ，比如在 script src .../script 中的src指定为目标网站的js ，同理 ，还有跨域攻击也可以利用 image src ... / 的功能。还有iframe更能直接加载别的网站的内容到自己的网站里来。 这前面几种可以说是技巧 ，说句不好听的就是浏览器的漏洞 ，浏览器并未从正面上支持跨域 ，而且上面的 几种跨域方法也是有各种局限 ，比如jsonp的方法 ，只能用GET方法 ，iframe方法是能直接加载内容到网 站上 ，但是本网站和iframe的数据交互也是一个头疼的地方。 本文档使用 看云 构建 - 4 - 1. 从跨域到 CORS 毕竟从iframe加载内容到本站后 ，是存在着数据交互的 ，可以用 document.domain ，window .name ，不过这些方法都能用 ，且有效 ，不过总不尽完美 ，存在着各种各样的局限。 然而HTML5引进了一个叫window.postMessage方法来跨域传送数据 ，这个倒是不错 ，不过也是利用了 iframe。 除此之外 ，还有flash ，服务器代理等跨域方法 ，但是本章要介绍的是浏览器或服务器的跨域方法 ，它的名 字叫CORS。 2. CORS CORS全称是Cross-Origin Resource Sharing ，跨域资源共享 ，这是浏览器的标准 ，也算是协议 ，基本上 现代浏览器都支持 ，除了奇葩浏览器 ，例如IE8、IE9 ，只支持部分特性。 使用它 ，需要服务器端和客户端两方面的准备 ，服务器端我们选择nginx作为测试 ，客户端只是js罢了。 nginx服务监听在localhost的8080端口 ，而现在有一个网站运行localhost的3000端口 ，需要跨域到 nginx那台服务器。 现在开始测试之旅 ，要在浏览器模拟跨域请求 ，只需三行js代码。