1. 什么是跨域
- 跨域是由于浏览器的同源策略造成的
- 域名(或者IP),端口,协议只要有一个不同,便是跨域
1.1 同源策略
限制浏览器请求接口域名(或者IP),端口,协议都相同
- iframe同源:禁止对不同源的页面DOM进行操作
- XmlHttpRequest同源,禁止ajax跨域
2. 为什么浏览器限制跨域
为了限制浏览器的行为,防止CSRF(Cross Site Request Forgery 跨域请求伪造)攻击
CSRF攻击原理
- 登录受信任网站A,并在本地生成Cookie
- 在没有退出A的情况下,访问恶意网站
- 恶意网站发起一个访问A站点的ajax请求
- 允许跨域的话,恶意网站的请求就可以获取到A站点的Cookie,从而请求成功
3. CORS:Cross-origin Resource Sharing(跨资源共享)
跨资源共享标准新增了一组HTTP首部,允许服务器指定哪些站点可以跨域访问服务器资源
- Access-Control-Allow-Origin
- 指示请求的资源能共享给哪些域
- Access-Control-Allow-Credentials
- 是否允许发送Cookie,默认情况下,CORS请求中不携带Cookie
- Access-Control-Allow-Headers
- 用在对预检请求的响应中,指示实际的请求中可以使用哪些 HTTP 头。
- Access-Control-Allow-Methods
- 指定对预检请求的响应中,哪些HTTP方法允许访问请求的资源。
- Access-Control-Expose-Headers
- 指示哪些 HTTP 头的名称能在响应中列出
- Access-Control-Max-Age
- 指示预请求的结果能被缓存多久
- Access-Control-Request-Headers
- 用于发起一个预检请求,告知服务器正式请求会使用那些 HTTP 头
- Access-Control-Request-Method
- 用于发起一个预请求,告知服务器正式请求会使用哪一种 HTTP 请求方法
- Origin
- 指示获取资源的请求是从什么域发起的
4. 预检请求(prelight request)
对于那些可能产生问题的HTTP请求,浏览器首先使用OPTIONS方法发起一个预检请求,检测浏览器所支持的请求方法和浏览器是否支持跨域, 服务器允许之后,才会发起真正的HTTP请求
4.1 简单请求
简单请求- 请求方法是GET,HEAD,POST
- CROS安全的首部集合:
- Accept
- Accept-Language
- Content-Language
- DRP
- DownLink
- Save-Data
- Viewport-Width
- Width
- Content-Type(取值范围: text/plain, multipart/form-data, application/x-www-form-urlencoded)
- 请求中任意的XMLHttpRequestUpload对象均没有注册任何事件监听器
- XMLHttpRequestUpload对象可以使用XMLHttpRequest.upload属性访问
- 请求中没有使用ReadableStream对象
4.2 预检请求
预检请求- 请求方法使用了PUT, DELETE,CONNECT, OPTIONS, TRACE, PATCH
- 使用了CROS安全的首部集合之外的其他首部字段
- Content-Type没有使用CROS限制的集合
- 请求中的XMLHttpRequestUpload对象注册了任意多个事件监听器
- 请求中使用了ReadableStream对象
4.3 预检请求的作用
- 检测服务器是否支持所请求的方法
- 检测浏览器是否跨域
5. 跨域问题的解决
5.1 使用jsonp
5.2 服务器端解决
- 所有的OPTIONS都允许访问
- 设置Access-Control-Allow-Origin,Access-Control-Allow-Methods,Access-Control-Allow-Credentials,Access-Control-Allow-Headers等响应头
- 浏览器端,ajax请求,添加两个参数
- crossDomain: true,
- xhrFields: { withCredentials: true },
5.3 Spring为例解决跨域问题
- 方案1: 在Controller加上@CrossOrigin注解
- 方案2: 自定义一个拦截器或者过滤器,实现以下代码
String method = request.getMethod();
if ("OPTIONS".equals(method.toUpperCase())) {
response.setHeader("Access-Control-Allow-Headers", "*");
response.setHeader("Access-Control-Allow-Methods", "*");
response.setStatus(200);
response.setContentType("text/plain;charset=utf-8");
response.setCharacterEncoding("utf-8");
return true;
}
response.setHeader("Access-Control-Allow-Origin", "*");
//如果使用了SpringSecurity
//还需要在SpringSecurity的配置中加上以下代码
antMatchers(HttpMethod.OPTIONS).permitAll();
网友评论