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,如下图
JSONP解决跨域的方式
-
JSONP解决跨域,如下图
- CORS解决跨域的方式
- CORS的代码
-
在没有利用CORS解决跨域之前就请求,请求失败如下图
-
Access-Control-Allow-Origin:*表示所有源都可以访问,如下图
- Access-Control-Allow-Origin:http://a.dp.com:8080 指定的源都才能访问,如下图
- 降域解决跨域的方式
- 降域的代码
-
通过降域来实现跨域,如下图
- 降域的时候两个域名要有最起码相同的一个基础域名,比如,hppt://a.dp.com和http://b.dpp.com 是不会降域到一起的
- postMessage解决跨域的方式
- postMessage的代码
-
通过postMessage
来实现跨域,如下图