进阶任务13

1、什么是同源策略

• 同源策略：浏览器出于安全方面的考虑，只允许本域下的接口交互；不同源的客户端脚本在没有明确授权的情况下，不能读写对方的资源；这种策略可以预防某些恶意行为
• 本域是指：
• 同协议：比如都是http或者https
• 同域名：比如http://jirengu.com/a和http://jirengu.com/b
• 同端口：比如都是8080端口
• 注意：对于当前页面来说页面存放JS的域不重要，重要的是加载JS页面所在的是什么域

---

2、什么是跨域？有几种实现方式

• 跨域是指打破同源策略的限制，不同域之间进行接口的交互
• 跨域的实现方式有：
• JSONP
• CORS
• 降域
• postMessage

---

3、JSONP的原理是什么？

• html中的script标签可以引入其他域下的js，并不受同源策略的影响
• JSONP就是依据这个特性，在页面创建一个函数，并利用script引入后端所要传递的已经转换成JSON格式的字符串加上需要传递的函数名内容，再在当前页面用js来执行，从而实现跨域，这个过程需要后端的支持

---

4、CORS是什么

• CORS--->**全称是跨域资源共享（Cross-Origin Resource Sharing），定义了浏览器与服务器在访问跨域资源时如何沟通的准则，也是一种ajax跨域请求资源的方式。它有简单请求和复杂请求之分
• 对于简单请求：
  • 只使用 GET, POST, HEAD 三种请求方法的请求。其中如果使用 POST 方法向向服务器传送数据；那么 Content-Type 字段只能是 application/x-www-form-urlencoded, multipart/form-data 或者 text/plain 的一种
  • 同时不使用自定义的请求头字段
  • 在发送一个CORS简单请求的时候，浏览器会自动在请求头加一个 Origin 字段（这个字段表明了请求来自哪个源（协议+域名+端口））；但是在把结果返回给JS代码前会做一次检查；浏览器会查看 response header 中是否有 Access-Control-Allow-Origin 这个 header ；如果有且允许当前 Origin 访问的话，才会真正将结果返回给 JS 程序
• 对于复杂请求：
  • 任何不满足简单要求的请求，都是复杂请求。比如发送PUT、DELETE等HTTP动作，或者发送Content-Type: application/json的内容
  • 其首先发送的是一种"预请求"，此时作为服务端，也需要返回"预回应"作为响应；预请求实际上是对服务端的一种权限请求，只有当预请求成功返回，实际请求才开始执行
  • 预请求使用 OPTION 方法发送，并且带上 Access-Control-Request-Method、Access-Control-Request-Headers 等 header
  • 一旦受到预回应，则实际请求开始发送

---

5、三种以上跨域的解决方式

• 首先配置host，如下图

  
  host文件

• JSONP解决跨域的方式

• JSONP的代码

• JSONP解决跨域，如下图

  
  JSONP解决跨域

---

• CORS解决跨域的方式
• CORS的代码

• 在没有利用CORS解决跨域之前就请求，请求失败如下图

  
  请求失败

• Access-Control-Allow-Origin:*表示所有源都可以访问，如下图

  
  cors
• Access-Control-Allow-Origin:http://a.dp.com:8080 指定的源都才能访问，如下图
  cors

---

• 降域解决跨域的方式
• 降域的代码

• 通过降域来实现跨域，如下图

  
  降域
• 降域的时候两个域名要有最起码相同的一个基础域名，比如，hppt://a.dp.com和http://b.dpp.com 是不会降域到一起的

---

• postMessage解决跨域的方式
• postMessage的代码

• 通过postMessage

  
  postMessage
  

  来实现跨域，如下图