跨域与CORS、JSONP

跨域与CORS、JSONP

同源策略

要了解什么是跨域，首先要了解浏览器的同源策略。浏览器为了防止不同源之间进行非法的数据请求，而规定的策略，也就是说，浏览器限制了不同源之间的数据请求，使两个不同源网站不能进行非法的沟通。
我们首先要了解源的定义：
任何一个网页打开window.origin或location.origin可以得到当前源
源=协议+域名+端口号
如果两个url的

• 协议
• 域名
• 端口号
• 完全一致，那么这两个url就是同源的

比如

• https://qq.com、和http://www.baidu.com不同源
• https://baidu.com、https://www.baidu.com 不同源
• 完全一致才算是同源

为什么我们需要同源策略呢？
原因有以下几点：

• 对于一个文件的请求，发的请求几乎没有区别，只有referer有区别
• 如果后台开发者没有检车referer，那么就完全没有区别
• 为了防止有些不靠谱的后端，浏览器就自己弄了一个最开始的保护

同源策略带来了许多安全方面的好处，可以很好的保护用户隐私，但实际上保护用户隐私不止这一环，还有许许多多的要求，但这里是整个安全链条最开始的部分之一。

什么是跨域？CORS？JSONP？

当两个不同源之间想要进行数据访问，通过一些技术手段实现，这个过程就是叫跨域。
目前的跨域方式有许多种，常见也是最经典的方式就是CORS和JSONP两种。

CORS

CORS （Cross-Origin Resource Sharing，跨域资源共享）是一个系统，它由一系列传输的HTTP 头组成，这些 HTTP 头决定浏览器是否阻止前端 JavaScript 代码获取跨域请求的响应。
那么如何使用CORS进行跨域呢？
只需要两步，假如想要获取数据的网站叫做http://cors.com:8888,想要获取到http://shuju.com:9999/code.json这个路径的数据：
第一步，先要到cors.com这个网站中修改XMLHttpRequest对象上修改它的open路径，路径为http://shuju.com:9999/code.json，一定要一模一样，否则不能请求成功。
第二歩，到shuju.com这个网站中的服务器文件中修改响应头，增加一个setHeader，全部内容为：

response.setHeader('Access-Control-Allow-Origin','http://cors.com:8888')

路径也要和请求网站完全一致，包括端口号，只要写成这样就可以成功用CORS跨域了。

如果有两个网站是不是也要这么写呢？
多个网站一般是读取网站的referer，也就是request.headers['referer']然后再判断是否来自这个网站即可。
至此，CORS讲完了，CORS就是这样简单。
但是有一个很大的问题，那就是IE不支持。。。<