cors跨域_同源策略和CORS跨域

目录：

1.同源策略

2.跨域

3.几种跨域技术 - JSONP, CORS

---

1.同源策略

什么叫同源？

URL由协议、域名、端口和路径组成，如果两个URL的协议、域名和端口相同，则表示他们同源。相反，只要协议，域名，端口有任何一个的不同，就被当作是跨域。

e.g. 对于http://store.company.com/dir/page.html进行同源检测：

URL结果原因http://store.company.com/dir2/other.html成功仅路径不同http://store.company.com/dir/inner/another.html成功仅路径不同 https://store.company.com/secure.html失败协议不同http://store.company.com:81/dir/etc.html失败端口不同http://news.company.com/dir/other.html失败主机名不同

同源策略 Same-Origin-Policy(SOP)

浏览器采用同源策略，禁止页面加载或执行与自身来源不同的域的任何脚本。换句话说浏览器禁止的是来自不同源的"document"或脚本，对当前"document"读取或设置某些属性。

情景：

比如一个恶意网站的页面通过iframe嵌入了银行的登录页面（二者不同源），如果没有同源限制，恶意网页上的javascript脚本就可以在用户登录银行的时候获取用户名和密码。

浏览器中有哪些不受同源限制呢？

<script>、<img>、<iframe>、<link>这些包含 src 属性的标签可以加载跨域资源。但浏览器限制了JavaScript的权限使其不能读、写加载的内容。

---

2.跨域

跨域是指从一个域的网页去请求另一个域的资源。比如从http://www.baidu.com/ 页面去请求 http://www.google.com 的资源。

---

3.跨域技术-JSONP

JSONP是什么？

上面提到过包含src属性的<script>标签可以加载跨域资源。 JSONP就是利用<script>标签的跨域能力实现跨域数据的访问。

JSONP实现的原理

原文：说说JSON和JSONP，也许你会豁然开朗，含jQuery用例

在这之前，先来介绍下我是如何简单的开启服务的。

使用python的SimpleHTTPServer模块（2.x）（3.x中时http.server）The SimpleHTTPServer module has been merged into http.server in Python 3.0.

------------------------------------------------------------------------------------------------

如果你已经用过python，请跳过这里。

>>安装python（注意设置环境变量 Path -- D:Program FilesPython2.7.1;）
（验证python安装配置完成：打开cmd, 输入python 有识别）
（cmd 切换工作目录）
>>在工作目录中执行
$ python -m SimpleHTTPServer 8088 (2.x)
$ python -m http.server 8088 (3.x)
>>服务启动后，不要关闭该窗口；否则相当于杀死了该服务进程

------------------------------------------------我是分割线---------------------------------------

index.html，在8088端口提供服务

View Code
remote.js，在8090端口提供服务，来模拟不同域的远程文件（端口不同）

View Code

JSONP的缺点

JSONP只支持 GET 请求。

支持JSONP的不同技术

原文：详解Jquery和AngularJs中jsonp解决跨域问题

>>Ajax

 1 myUrl ="http://localhost:8090/api/test";  2 $.ajax({  3   type:"GET",  4   url:myUrl,  5   dataType:"jsonp",  6   jsonp:"callback",  7   jsonpCallback:"jsonpCallback",  8   success:function(data){  9     alert(data.msg); 10   } 11 }); 12 function jsonpCallback(data){ 13      alert(data); 14 }

JSONP 是通过动态添加<script>标签来调用服务器的脚本（<script>含有src属性，src属性没有跨域限制）；而 Ajax 是通过 XHR(XmlHttpRequest) 对象。两者并没有直接关系，以上只是Ajax封装JSONP的一种方式。

---

4.跨域技术-CORS （CrossOrigin Resources Sharing，跨源资源共享）

CORS是什么？

CORS，是 HTML5 的一项特性，它定义了一种浏览器和服务器交互的方式来确定是否允许跨域请求。

相对于 JSONP 这种解决方案来说，使用CORS，不需要要求服务器以指定格式返回数据（包装成JS脚本的格式：callback_func({ data });）；CORS，只需要在服务器端做一些通用设置。

一个简单有效的解决方案：SpringMvc+AngularJS通过CORS实现跨域方案参考网站：

enable cross-origin resource sharing 对各种服务器设置的详细介绍，主流浏览器支持一览。

HTTP access control (CORS)