什么是同源
源: window.origin 或者 location.origin 可以获得当前源
源 = 协议 - 域名 - 端口号 如果js原型在 A 里面,那么就只能获取当前 源A里面的数据 不能获取 源A 之外的 数据
如果没有同源策略, 那么信息隐私就会没有,无法区分发送者是谁
如果两个 URL的 协议 域名 端口号 完全一致 那么这两个URL就是同源
跨域关键知识
- 同源策略:浏览器故意设计的功能限制
- CORS : 图片浏览器限制的一个解决办法
- JSONP : IE时代的妥协
JSONP跨域
因为浏览器不支持CORS,因此用 JS 来拿到其他浏览器的数据进行跨域,用回调来请求数据。 优点: 支持IE 和 跨域 缺点: 不能像AJAX 那么精确,JSONP不支持 POST
封装JSONP
function jsonp(url){
// 创建 Promise
return new Promise((resolve,reject) =>{
const random = 'cui'+ Math.random() // 随机的名字防止重名
window[random] = data = {
// 成功 调用 resolve
resolve(data)
}
const script = document.createElement('script')
// 业界通用名字 callback
script.src = '{url}?callback=${random}'
script.onload = () =>{
// 删除多余的 script 标签
script.remove()
}
script.onerror = () =>{
// 失败调用 reject
reject()
}
document.baody.appendChild(script)
})
}
jsonp(`http://qq.com:8888/friends.js`)
CORS 跨域
解决跨域的办法,在node.js里面设置响应头
设置让谁可以访问我的数据例如 :
让 cui.com:9999可以访问http://qq.com:888… 的数据
response.setHeader('Access-Control-Allow-Origin','http://cui.com:9999')