跨域

默认情况下，XMLHttpRequest 或 Fetch 发起的跨域请求，浏览器会限制。

在jquery.com网站请求数据

什么是跨域请求？

• 什么是同源策略
  • 同协议(Protocol)
    同主机(Host):在请求头中有个Host，对应的就是主机
    同端口(Port)： https (默认端口：443) http(默认端口：80) 可以使用命令行查看 curl -v https://github.com
  • 在使用XMLHttpRequest 或 Fetch 发起的跨域请求，会受到同源策略的限制

如何跨域？

跨域资源共享（ 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:jsonp jQuery会自动生成一个全局函数来替换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()。

服务器代理跨域(后端的事)

关于跨域攻击 [http://www.ruanyifeng.com/blog/2016/09/csp.html](Content Security Policy 入门教程)

通过页面的src 发出的请求是跨域吗？是跨域，但是不受同源策略的限制