同源策略和跨域资源请求

url:uniform resource lacator，统一资源定位符，俗称网址

• http默认端口：80
• https默认端口：443
  （协议默认加上端口）

http://user:pass@www.example.jp:80/dir/index.html?uid=1#chl

(http协议方案名，还有https)（user:pass登录信息[认证]，几乎已经不使用）（www.example.jp，服务器地址）（:80，服务器端口号）（/dir/index.html，带层次的文件路径）（?uid=1，查询字符串，键值对的方式）（#chl，片段标示符，#后面为哈希）

• #片段标示符一般为页面内跳转，在a上设置锚点，不刷新页面。对serve来说没有效果，不会传递到服务器，文档内定位。#后面为hash，哈希

查看源origin：location.origin查看完整的源，输出域名、协议、端口号。

• location.origin:IE下不支持这个属性，所以所以可以写成：if(location.origin===undefined){ location.protocol+location.hostname+location.port},这样就可以兼容ie

同源策略(same-origin policy)

同源策略是浏览器的一个功能，同源就是协议：域名、端口号完全一致

不同源的客户端脚本在没有明确授权的情况下，不能读写对方的资源

通过配置hosts文件，可配置本地服务器对应的域名：
C:\Windows\System32\drivers\etc\hosts

• 如图可以设置本地访问的域名为www.baidu.com,这样浏览器访问baidu.com时就会跳转到本地（本地服务器打开）

http协议的默认端口是80，默认情况下，80端口只有系统管理员才可以监听，mac下系统管理员身份是sudo命令，window下以管理员身份启动命令行

什么不是同源策略

a.com/index.html
可以引用b.com/main.js或b.com/style.css/b.com/logo.png

但是a.com里面的b.com/main.js不能对b.com的资源进行读写（ajax报错）

• 比如对于一个使用ajax求情数据获取更多内容的操作，可以在本地搭建配置，查看浏览器对不同源策略的限制。

1、 设置并开启本地服务器,修改hosts文件，模拟两个不同的域名a.com和b.com：

2、使用jQuery的ajax请求，url地址为：’/getmore’,当前目录下请求
初始状态有两个内容条，每次点击加载更多，获取六条内容，并添加到dom,本地服务器开启使用8080端口，浏览器输入http://a.com:8080/jQajax.html，点击可以实现ajax请求：

3、修改ajax的url请求地址为url: ‘//b.com:8080/getmore’
点击加载浏览器控制台报错，跨域请求不支持

jQajax.html:1 XMLHttpRequest cannot load http://b.com:8080/getmore?start=3&len=6. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://a.com:8080‘ is therefore not allowed access.

这是一个跨域请求典型的例子，解决跨域请求一共以下几种方法

降域
JSONP
Cross-origin resource sharing（CORS，跨域资源共享）
HTML5 postMessage
其他hack：利用hash；利用windo.name