赞
踩
指的是跨域名的访问
举例
跨域原因 | 举例 |
域名不同 | www.czxy.com 和 www.itheima.com |
域名相同,端口号不同 | |
二级域名不同 | jiaoshi.czxy.com 和 xuesheng.czxy.com |
不同的协议 | https://www.czxy.com 和 http://www.czxy.com |
优点:可以有效的阻止跨站攻击。
缺点:给开发带来的不便,因为在实际生产环境中,肯定会有很多服务器之间交互,地址和端口都有可能不同。
常用的解决跨域方案有3种:
1. jsonp
使用script标签原理实现。是最早的解决方案。
缺点:
2.Nginx反向代理
利用Nginx反向代理把跨域变为不跨域,支持各种求情方式
Nginx作为作为程序入口,将请求分发到不同的服务
缺点: 需要额外配置Nginx,语义不清晰。
现在还是有不少公司在用。
3.CORS
一个W3C标准,全称为“跨域资源共享”(Cross-origin resource sharing)。
规范化的跨域请求解决方案,安全可靠。
它允许浏览器向跨域服务器,发出XMLHttpRequest请求,解决了ajax只能同域使用的限制。
CORS需要浏览器和服务器都支持,目前,所有的浏览器都支持。
浏览器会将ajax请求分为两种: 简单请求, 特殊请求
(1) 请求方法是以下三种方法之一:
HEAD
GET
POST
(2)HTTP的头信息不超出以下几种字段:
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type:只限于三个值application/x-www-form-urlencoded
、multipart/form-data
、text/plain
当浏览器发现发现的ajax请求是简单请求时,会在请求头中携带一个字段:Origin
.
Origin中会指出当前请求属于哪个域(协议+域名+端口)。服务会根据这个值决定是否允许其跨域。
如果服务器允许跨域,需要在返回的响应头中携带下面信息:
- Access-Control-Allow-Origin: http://www.czxy.com
- Access-Control-Allow-Credentials: true
- Content-Type: text/html; charset=utf-8
-
注意:
如果跨域请求要想操作cookie,需要满足3个条件:
服务的响应头中需要携带Access-Control-Allow-Credentials并且为true。
浏览器发起ajax需要指定withCredentials 为true
响应头中的Access-Control-Allow-Origin一定不能为*,必须是指定的域名
不符合简单请求的条件,会被浏览器判定为特殊请求,,例如请求方式为PUT。
预检请求
特殊请求会在正式通信之前,增加一次HTTP查询请求,称为"预检"请求(preflight)。
浏览器先询问服务器,当前网页所在的域名是否在服务器的许可名单之中,以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复,浏览器才会发出正式的XMLHttpRequest
请求,否则就报错。
一个“预检”请求的样板:
- OPTIONS /cors HTTP/1.1
- Origin: http://www.czxy.com
- Access-Control-Request-Method: PUT
- Access-Control-Request-Headers: X-Custom-Header
- Host: api.leyou.com
- Accept-Language: en-US
- Connection: keep-alive
- User-Agent: Mozilla/5.0...
-
与简单请求相比,除了Origin以外,多了两个头:
Access-Control-Request-Method:接下来会用到的请求方式,比如PUT
Access-Control-Request-Headers:会额外用到的头信息
预检请求的响应
服务的收到预检请求,如果许可跨域,会发出响应:
- HTTP/1.1 200 OK
- Date: Mon, 01 Dec 2008 01:15:39 GMT
- Server: Apache/2.0.61 (Unix)
- Access-Control-Allow-Origin: http://www.czxy.com
- Access-Control-Allow-Credentials: true
- Access-Control-Allow-Methods: GET, POST, PUT
- Access-Control-Allow-Headers: X-Custom-Header
- Access-Control-Max-Age: 1728000
- Content-Type: text/html; charset=utf-8
- Content-Encoding: gzip
- Content-Length: 0
- Keep-Alive: timeout=2, max=100
- Connection: Keep-Alive
- Content-Type: text/plain
-
转存失败重新上传取消
转存失败
重新上传
取消
转存失败重新上传取消
正在上传…
重新上传
取消
转存失败重新上传取消
正在上传…
重新上传
取消
转存失败重新上传取消
正在上传…
重新上传
取消
转存失败重新上传取消
正在上传…
重新上传
取消
转存失败重新上传取消
正在上传…
重新上传
取消
转存失败重新上传取消
正在上传…
重新上传
取消
转存失败重新上传取消
正在上传…
重新上传
取消
转存失败重新上传取消
转存失败
重新上传
取消
转存失败重新上传取消
转存失败
重新上传
取消
转存失败重新上传取消
除了Access-Control-Allow-Origin
和Access-Control-Allow-Credentials
以外,这里又额外多出3个头:
Access-Control-Allow-Methods:允许访问的方式
Access-Control-Allow-Headers:允许携带的头
Access-Control-Max-Age:本次许可的有效时长,单位是秒,过期之前的ajax请求就无需再次进行预检了
如果浏览器得到上述响应,则认定为可以跨域,后续就跟简单请求的处理是一样的了。
编写配置类
- import org.springframework.context.annotation.Bean;
- import org.springframework.context.annotation.Configuration;
- import org.springframework.web.cors.CorsConfiguration;
- import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
- import org.springframework.web.filter.CorsFilter;
-
- @Configuration
- public class GlobalCorsConfig {
- @Bean
- public CorsFilter corsFilter() {
- //1.添加CORS配置信息
- CorsConfiguration config = new CorsConfiguration();
- //1) 允许的域,不要写*,否则cookie就无法使用了
- config.addAllowedOrigin("http://www.czxy.com");
- //2) 是否发送Cookie信息
- config.setAllowCredentials(true);
- //3) 允许的请求方式
- config.addAllowedMethod("OPTIONS");
- config.addAllowedMethod("HEAD");
- config.addAllowedMethod("GET");
- config.addAllowedMethod("PUT");
- config.addAllowedMethod("POST");
- config.addAllowedMethod("DELETE");
- config.addAllowedMethod("PATCH");
- // 4)允许的头信息
- config.addAllowedHeader("*");
-
- //2.添加映射路径,我们拦截一切请求
- UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();
- configSource.registerCorsConfiguration("/**", config);
-
- //3.返回新的CorsFilter.
- return new CorsFilter(configSource);
- }
- }
-
转存失败重新上传取消
转存失败
重新上传
取消
转存失败重新上传取消
正在上传…
重新上传
取消
转存失败重新上传取消
正在上传…
重新上传
取消
转存失败重新上传取消
正在上传…
重新上传
取消
转存失败重新上传取消
正在上传…
重新上传
取消
转存失败重新上传取消
正在上传…
重新上传
取消
转存失败重新上传取消
正在上传…
重新上传
取消
转存失败重新上传取消
正在上传…
重新上传
取消
转存失败重新上传取消
转存失败
重新上传
取消
转存失败重新上传取消
转存失败
重新上传
取消
转存失败重新上传取消
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。