同源策略
只有 协议+端口+域名一模一样才允许发ajax请求
http://baidu.com 不可以向 http://www.baidu.com 发ajax请求
浏览器必须保证
只有 协议+端口+域名 一模一样才允许发ajax请求
跨域发送请求是成功的,不过不会得到结果
JSONP
- A.com网站 想访问 B服务器,获取B网站返回的数据
- 在A网站上新建一个script标签,src 写成类似 B.com/get/data?callback=dispatchDate,向B网站发起get请求
B网站接受到请求,拿到数据data: {name: leon, sex: male, age: 18}后,返回给A网站dispatchDate( {name: leon, sex: male, age: 18}); - A网站得到B返回的数据,就会自动调用A网站中写好的dispatchDate方法,处理返回的data
- 删除A网站中生成的script标签
参考答案
JSONP
请求方:frank.com 的前端程序员(浏览器)
响应方:jack.com 的后端程序员(服务器)
请求方创建 script,src 指向响应方,同时传一个查询参数 ?callbackName=yyy
响应方根据查询参数callbackName,构造形如
yyy.call(undefined, '你要的数据')
yyy('你要的数据')
这样的响应
浏览器接收到响应,就会执行 yyy.call(undefined, '你要的数据')
那么请求方就知道了他要的数据
这就是 JSONP
约定:
callbackName -> callback
yyy -> 随机数 frank12312312312321325()
jQuery 用法
$.ajax({
url: "http://jack.com:8002/pay",
dataType: "jsonp",
success: function( response ) {
if(response === 'success'){
amount.innerText = amount.innerText - 1
}
}
})
JSONP 为什么不支持 POST
因为 JSONP 是通过动态创建 script 实现的,而创建 script 只能发送 get 请求
参考答案
因为 JSONP 是通过动态创建 script 实现的
创建 script 只能发送 get 请求
加入一个网站有登录校验
首先访问登录页,输入用户名密码后在浏览器种cookie,然后用户可以进行接下来的操作,不会跳的登录页。
如果用户强制输入login后的url则会重定向到登录页。cookie没有设置成功。会被后端拦截。
login => set cookie
ajax request => get cookie 后端会根据cookie判断是否是合法用户
注意cookie只能种在自己的域下
跨域不带cookie
CORS跨域
后端程序员添加相应头
response.setHeader('Access-Control-Allow-Origin', 'http://www.zhengshengliang.com:8887'); // 阿亮是我兄弟
response.setHeader('Access-Control-Allow-Origin', '*'); // 四海之内皆兄弟
JSONP有个缺点,不能发POST请求
Cross-Origin Request Sharing: 跨站资源共享
postMessage iframe
cors相关:
阮一峰 cors