网络原理4.跨域资源共享,跨域问题解决方案

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();

最后编辑于：2019.06.29 09:34:06