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解决跨域
- 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
来实现跨域，如下图
网友评论