饥人谷技术博客

同源策略、跨域、jsonp

2016-09-19  本文已影响200人  Nicklzy

什么是同源策略

的网站只能访问与包含它的页面位于同一个域中的资源。

什么是跨域?跨域有几种实现形式

  1. 降域
    1. 比如把child.a.com和a.com和xxx.child.a.com都可以降域为a.com
    • 实现的话需要在两个需要进行跨域的网站script都写document.domain = 'a.com'进行降域
    • 其中ajax不受降域的影响,得用iframe在页面中引用另一个页面的这种方式
    • 域名只能往下设置。比如xxx.child.a.com只能往下变成chlid.a.com或者再往下变成a.com。但是如果到了a.com就不能再回去到child.a.com、xxx.child.a.com
    • 降域有安全性的问题,如果一个子域名被攻击,多个被降域的域名都会被连带。

http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html

jsonp 的原理是什么

首先json是一种数据格式,而jsonp是一种数据的调用方式。
这个方式允许用户传递一个callback参数给服务器端,然后服务器端会根据这个callback所附着的参数来响应数据,服务器端会按照这个callback作为函数名来包裹住json数据,这样客户端就返回了一个名为callback所对应名字的方法。

CORS是什么

跨域资源共享(Cross-Origin Resource Sharing ),允许不同源的站点获取对方的资源。这需要你所请求数据站点的后端配合,只有他允许了,你才可以获取到。

QQ截图20160919104702.png

本地搭建服务器,演示同源策略

  1. 本地搭建服务器(如果使用 SAE 可创建不同的代码版本,这样可通过1.xxx.sinapp.com和2.xxx.sinapp.com 访问了)
  2. 修改 本地host,通过不同域名访问本地服务器。比如访问http://a.com/index.html, http://b.com/ajax.php,本质是
  3. 在 index.html 里使用 ajax 接口访问 http://b.com/ajax.php 里的数据。
  4. 查看输出报错

搭建服务器,配置好host



主页代码



main.js配置

data数据



a.com

b.com

未加入header("Access-Control-Allow-Origin:http://a.com");

同源策略被禁止引用

加入header("Access-Control-Allow-Origin:http://a.com");
上一篇 下一篇

猜你喜欢

热点阅读