跨域
2017-08-24 本文已影响0人
喵不吱
默认情况下，XMLHttpRequest 或 Fetch 发起的跨域请求，浏览器会限制。
在jquery.com网站请求数据
什么是跨域请求？
- 什么是同源策略
- 同协议(Protocol)
同主机(Host):在请求头中有个Host，对应的就是主机
同端口(Port)： https (默认端口：443) http(默认端口：80) 可以使用命令行查看 curl -v https://github.com - 在使用XMLHttpRequest 或 Fetch 发起的跨域请求，会受到同源策略的限制
- 同协议(Protocol)
如何跨域？
跨域资源共享（ CORS ）机制允许 Web 应用服务器进行跨域访问控制，从而使跨域数据传输得以安全进行。（打破同源策略）一般通过该方式实现调用第三方数据平台滴API
- 浏览器将CORS请求分成两类：简单请求和非简单请求
只要同时满足以下两大条件，就属于简单请求。
(1) 请求方法是以下三种方法之一：
HEAD
GET
POST
（2）HTTP的头信息不超出以下几种字段：
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain
- 具体实施：在
https://jquery.com/页面输入fetch('https://api.github.com/users/twhy')(一个API接口)
响应头中关键点
Access-Control-Allow-Origin:*: 所有的网站都可以请求https://api.github.com - 那如何允许指定网站请求数据？ 需要在服务端设置响应头信息=请求头中的
origin
response.header("Access-Control-Allow-Origin":"https://jquery.com"这样只有jquery网站才能访问到数据
request 请求头中 origin：表示请求是从哪里发起
response.header("Access-Control-Allow-Origin":request.header("origin")||'*'
请求头中的origin
但是，origin 是可以伪造的。
可怕，前端一点都不安全
复制之后，通过命令行等工具可以个更改origin
预检请求 即：非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求
-
在
https://github.com/页面fetch('https://api.github.com/users/twhy',{method:'put'})
首先会发起预检请求，判断服务端是否支持跨域，看各种请求allow的范围
在发起预检请求时请求头会带上Access-Control-Request-Method:PUT
Access-Control-Expose-Headers:服务端暴露的哪些头部。
响应头（Response Headers）的信息应该是在服务端控制和设置
发起实际请求put，只不过该请求服务端不支持
接着，在预检请求中有个Access-Control-Max-Age:86400表示24小时内不会发起预检。
在不禁用缓存的情况下再次发起请求，结果如下：
缓存状态下
-
关于预检请求更多阅读mdn, 参考MDN 以及 阮一峰老师的这一篇文章 跨域资源共享 CORS 详解 以后继续填坑...
JSONP （只能获取（get）数据，考虑到旧式浏览器采用奥,其实现的原理感受到了前端的苦逼而无所不用其极）
- 本质时加载脚本的方式请求数据（数据在脚本中）。原理是资源文件没有同源限制。
- 需要服务端支持。根据参数callback的值，拼接成相应的脚本
function jsonpCallback(data) {
console.log(data)
}
let script = document.createElement('script')
script.src = `https://octocats.now.sh/jsonp/octocats?callback=jsonpCallback&_=${Date.now()}` //加时间戳不会被缓存到
document.body.appendChild(script) // 加到文档之后浏览器才会请求脚本
涉及到另外一个知识点：不符合CSP 的外部资源就会被阻止加载
- jQuery本身提供了jsonp的支持。 设置字段
dataType:jsonpjQuery会自动生成一个全局函数来替换callback=?
$.ajax({
url: 'https://octocats.now.sh/jsonp/octocats',
dataType: 'jsonp',
success: function(cats) {
console.log(cats) //json数据 {data: Array(10), pagination: {…}}
}
})
生成的字串
响应回来的原始信息
CORS和JSONP对比
- JSONP只能实现GET请求，而CORS支持所有类型的HTTP请求。
使用CORS，开发者可以使用普通的XMLHttpRequest发起请求和获得数据，比起JSONP有更好的错误处理。 - JSONP主要被老的浏览器支持，它们不支持CORS，而绝大多数现代浏览器都已经支持了CORS。
postMessage() 全局函数 HTML5的方法（守得云开见日出啊）可以结合localstorage做两个不同域之间的通讯
- 调用：
otherWindow.postMessage(message, targetOrigin, [transfer])- otherWindow:指目标窗口，也就是给哪个window发消息，是 window.frames 属性的成员或者由 window.open 方法创建的窗口
- message: 是要发送的消息，类型为 String、Object (IE8、9 不支持)
- targetOrigin: 是限定消息接收范围，不限制请使用* 如：
$('#history')[0].contentWindow.postMessage(username, '*')向$('#history')[0].contentWindow这个窗体发送username数据
- 接受者监听message事件，拥有以下属性:
- data : 从其他 window 中传递过来的对象；
- origin ：表示调用window.postMessage() 方法时调用页面的当前状态；
- source：是发送消息的窗口对象，可以再次调用
postMessage()回传给发送者event.source.postMessage()。
