【JavaScript】详细解析跨域,同源与跨域的区别,跨域的方式

跨域的几种方式

      • 1. 什么是跨域?
      • 2. 为什么出现跨域?
      • 3. 什么是同源策略?
      • 4. 同源策略的限制
      • 5. 同源策略的天然支持跨域请求的特性属性
      • 6. 解决同源策略的方法
        • 方法一:处理跨域的jsonp方法
        • 方法二:处理跨域的CORS方法

1. 什么是跨域?

跨域: 就是不同域之间进行相互资源请求,也叫非同源策略请求。
例如:http://baidu.com 请求:http://taobao.com 即进行不同的域名下的资源调用。
注意:域名对应的IP地址也算是跨域操作;例:127.0.0.1 和 localhost 虽然对应,但是在地址栏中算两个域。

2. 为什么出现跨域?

浏览器在解析JavaScript出于安全方面的考虑,只允许在同域名下页面进行相互资源请求调用,不允许调用其他域名下的页面的对象;简单的理解就是 因为JavaScript同源策略的限制。
注意: 跨域并不是请求发不出去,请求能发出去,服务器能收到请求并正常返回结果,只是结果被浏览器拦截了,所以页面无法正常使用数据。

3. 什么是同源策略?

同源策略要求源相同才能进行正常的资源交互,即要求当前页面与调用资源的协议、域名、端口号 完全一致;只要有一个不同就是跨域。

参考如下图理解:
【JavaScript】详细解析跨域,同源与跨域的区别,跨域的方式_第1张图片
说明:
1、如果是协议和端口造成的跨域问题“前台”是无能为力的。

2、在跨域问题上,域仅仅是通过“URL的首部”来识别而不会根据域名对应的IP地址是否相同来判断。“URL的首部”可以理解为“协议, 域名和端口必须匹配”。

4. 同源策略的限制

同源策略限制一个资源地址加载的文档或脚本来自另一个资源地址进行交互,这是浏览器的一个用于隔离潜在恶意文件的关键的安全机制。它的存在可以保护用户隐私信息,防止身份伪造等(读取Cookie)。
同源策略限制内容有:

1、Cookie、LocalStorage、IndexedDB等存储性内容

2、不允许进行DOM节点的操作

3、不能进行AJAX请求

5. 同源策略的天然支持跨域请求的特性属性

1、

2、

3、

6. 解决同源策略的方法

方法一:处理跨域的jsonp方法

JSONP原理

利用

你可能感兴趣的:(JavaScript,javascript,开发语言,ecmascript)