同源策略 跨域 CORS

URL: Uniform Resource Locator 统一资源定位符,俗称网址

http://www.baidu.com:80/dir/index.html?uid=1#ch1
服务器地址:www.baidu.com
服务器端口号:80 (http默认端口:80,https默认端口:443)
带层次的文件路径:dir/index.html
查询字符串:uid=1
片段标识符:ch1(不会发起请求,只是在文档内定位,浏览器不会把这段内容发送给server)

什么是源?
location.origin 可以打出当前页面完整的源(IE不支持)
IE不支持,如何解决?
if(!location.origin){
location.origin=location.protocol+location.hostname+’:’+location.port
}
同源是指 协议+域名+端口号 相同

同源策略(Same-Origin Policy)是浏览器的一个功能
不同源的客户端脚本在没有明确授权的情况下,不能读写对方的资源。
计算机中的host文件?
我们在访问一个域名的时候,会去服务器请求IP,但是呢,我们也可以不去服务器请求,而是自己手动设定一个。
默认情况下,80端口只有系统管理员才能监听。

什么不是同源策略?
a.com/index.html
可以引用b.com/main.js
可以引用b.com/style.css
可以引用b.com/logo.png
(可以跨站引用,但是不能用ajax去读取)
但是,a.com里面的b.com/main.js 不能对b.com的资源进行读写。

跨域:突破同源策略的限制
1.降域
不同源->同源
用JS 改变当前页面的域
document.domain=a.com
ajax有可能不受domain限制?
缺点:只对Iframe形式的跨域可以解决
要有同样后缀的域名才能实施
2.JSONP
a.com 可以引用b.com的js文件
我们是不是可以在b.com的js文件里放数据?
满足两个条件:
1.接受一个callback的名字:XXX
2.返回JS的内容,调用XXX
注意,jsonp (json with padding) 和json没有什么关系
jsonp 就是动态的script. 你传什么callback,我就生成什么样的方法。

3.Cross-Origin Resource Sharing
4.HTML5 postMessage
5.其它Hack

CORS ( Cross-Origin Resource Sharing ,跨域资源共享)定义了在必须访问跨域资源时,浏览器与服务器应该如何沟通。

CORS的基本思想是:就是使用自定义的HTTP头部让浏览器与服务器沟通,从而决定请求或相应应该是成功,还是应该失败。

首先,我们来明确一下使用XMLHttpRequest ( XHR ) 对象实现AJAX通信的一个主要限制,来源于跨域安全策略。默认情况下,XHR对象只能访问与包含它的页面位于同一个域中的资源。这种安全策略可以预防某些恶意行为,但是,实现合理的跨域请求对开发某些浏览器应用程序也是至关重要的。

比如XHR发起的跨域GET或POST请求,为了让服务器能正常处理这个请求,我们在发送该请求时,需要给它附加一个额外的Origin头部,其中包含请求页面的源信息(协议、域名、端口),然后服务器根据这个头部信息来决定是否给予响应。

Origin : http://www.baidu.com

如果服务器认为该请求可接受,就在Access-Control-Allow-Origin头部中发回相同的源信息,如果是公共资源,可以回发“ * ”。

Access-Control-Allow-Origin : http://www.baidu.com

如果没有这个头部,或者有这个头部信息但源信息不匹配,浏览器就会驳回请求。正常情况下,浏览器会处理请求。这个请求和响应都不能包含cookie信息。

    原文作者:行踏空林
    原文地址: https://www.jianshu.com/p/f3666bebb6ca
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞