跨域 同源 协议 端口 域名

什么是协议，域名，端口？

首先理解一下URL URL - 统一资源定位器

Web浏览器通过URL从Web服务器请求页面。

一个网页地址实例 http://www.runoob.com/html/html-tutorial.html  

语法规则:scheme://host.domain:port/path/filename

说明:

• scheme - 指定使用的传输协议，最常用的HTTP协议，它是目前WWW中应用最广的协议。
• host - 定义域主机（http 的默认主机是 www）
• domain - 定义因特网域名，比如 runoob.com
• :port - 定义主机上的端口号（http 的默认端口号是 80）
• path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
• filename - 定义文档/资源的名称

所谓同源

同源策略的基本概念

1995年，同源政策由 Netscape 公司引入浏览器。目前，所有浏览器都实行这个政策。同源策略：最初，它的含义是指，A网页设置的 Cookie，B网页不能打开，除非这两个网页"同源"。所谓"同源"指的是"三个相同"。

同域名，同端口，同协议

举例来说，这个网址http://www.example.com/dir/page.html协议是http://，

域名是www.example.com，端口是80（默认端口可以省略）。它的同源情况如下。

http://www.example.com/dir2/other.html：同源
file:///F:/phpStudy/WWW/day01/04-demo/04.html 不同源(协议不同)
http://v2.www.example.com/dir/other.html：不同源（域名不同）
http://www.example.com:81/dir/other.html：不同源（端口不同）

同源策略的目的

同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。

同源策略的限制范围

随着互联网的发展，“同源策略”越来越严格，目前，如果非同源，以下三种行为都将收到限制。

1. Cookie、LocalStorage 和 IndexDB 无法读取。
2. DOM 无法获得。
3. AJAX 请求在浏览器端有跨域限制

虽然这些限制是很有必要的，但是也给我们日常开发带来不好的影响。比如实际开发过程中，往往都会把服务器端架设到一台甚至是一个集群的服务器中，把客户端页面放到另外一个单独的服务器。那么这时候就会出现不同源的情况，如果我们知道两个网站都是安全的话，我们是希望两个不同源的网站之间可以相互请求数据的。这就需要使用到跨域 。

简单理解同源

　　例如：如果你有一个服务器A，你所需要的script，css，php文件都在服务器A，你写的html也在服务器A上，然后运行，出现了效果，如果你想在另一台电脑上运行你的项目（注意另一台电脑无论有没有开启服务器，效果还是会显示出来的），只要把你写在服务器A上的协议，域名，端口以及你的项目名称复制下来，在另一台电脑上运行，同样会出现相同的效果，这就实现了同源。

　　简单来说，就是你的协议，域名，端口甚至项目名称都一样，不同电脑都能实现同样的效果。

所谓跨域

　　1.就是跨域名，跨端口，跨协议

     例如：如果有两个服务器，服务器A和服务器B,服务器A上存储了php数据，script,甚至是css这些文件，而你在服务器B上只写了html，然后你所在的服务器B上动态创建script，css，php数据(使用ajax请求),向服务器A上请求你想要的script,css，php数请求据(使用ajax)这些文件，请求这些文件后，你再在服务器B上运行你的html，虽然你的地址是在服务器B上，但是你还是可以运行效果与在服务器A上运行的效果是一样的，这样就是跨域名，跨端口，跨协议，实现了跨域。

　　简单来说，就是你请求的文件，只要含有“src”,“href”这些属性，你就能在其他服务器上，请求你所需要的文件，然后在自己的服务器上运行，就实现了跨域（跨域名，跨端口，跨协议）。

原生的动态请求script文件 

　　var _script = document.createElement("script");
　　_script.src="http://10.9.156.108/html5/Ajax/api/sendMessage.php?user="+_user+"message="+_message;
　　_script.type="text/javascript";

jQuery跨域请求script文件

$(document).ready(function(){
　　//getJSON 后面带参数，如果不带参数默认不跨域 ，带了参数跨域
　　//跨域优先
　　$.<link rel="icon" href="../img/favicon.ico" type="image/x-icon">("http://10.9.156.108/HTML5/lesson24/test.js?callback=?",[data],function(){});
　　//跨域  有getJSON 和 jsonp 两种方式
　　$.get("http://10.9.156.108/HTML5/lesson24/test.js=",null,function(){},"jsonp");　
});