跨域处理

1、同源策略
 
1.1 浏览器的同源策略
  浏览器同源策略是一种约定,是最核心、也是最基本的安全功能。它由Netscape最早提出,要求浏览器把相同的协议名、域名(或二级域名)和端口号的 URL 识别为同源网站,反之则是非同源网站。只有同源的网站才可以进行 Ajax 和 Cookie 的操作,而对超链接、JavaScript和 CSS 等的引用则不需要同源限制。当前,所有支持 JavaScript的浏览器都会使用这个策略。
  如果域名和端口都相同,但是请求路径不同,不属于跨域,如:
  www.jd.com/item 和 www.jd.com/goods 属于同源。
  因此,同源策略要求,在浏览器再次发出URL请求时,必须与浏览器当前的URL地址处于同域上,也就是域名、端口和协议都要相同,如果不同,就会报跨域错误,同时浏览器对非同源请求的返回结果会进行拦截。
 
2、跨域访问
  当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时,资源会发起一个跨域 HTTP 请求。在实际项目开发中,由于各种原因经常有跨域的需求,如做单点登录,在A网站登录后,跳转到B网站时不需要再输入用户名密码。前后端分离开发模式下,前端和后端分别部署在不同URL的服务器上,跨域访问问题尤其突出。如果不解决跨域问题,前端将不能成功的访问后端API。
  目前解决跨域请求问题,可以使用JSONP(传统的解决方案,只能使用GET请求),反向代理(如nginx,在前端服务器解决),添加响应头处理跨域(如CORS,在后端服务器解决)等多种技术。其中CORS方式是最常用的跨域实现方式,而且是对各种请求方法、各种数据请求类型都支持。
 
2.1添加响应头来处理跨域
2.1.1 CORS 跨域资源共享
  跨域资源共享(CORS,Cross-origin resource sharing) 是由 W3C 推出的解决非同源网站进行交互的一种机制。它允许浏览器和服务器交互 HTTP 头部信息,来决定跨域请求是否有权限。CORS需要浏览器和服务器同时支持。目前所有主流浏览器都支持该功能,但是IE浏览器不能低于IE10。
 CORS机制的特点:
浏览器自动完成,不需要用户参与;
前端进行正常的Ajax请求;
浏览器一旦发现Ajax有跨域的请求,就会自动添加头部信息;
在服务器端需要设置允许跨域的 HTTP 请求头,实现跨域;
服务器接收浏览器发送请求的头部信息,并根据这些信息,对是否允许跨域请求做出应答。
  可以看出,实现CORS 通信的关键是服务器端的设置。
 
2.1.2 设置 HTTP 响应头信息,跨域请求成功
(1)跨域请求分类
CORS标准中,浏览器将跨域请求分为简单请求和非简单请求,其处理方案略有差异。
◼ 简单请求:同时满足以下条件,就属于简单请求。
请求方法是以下三种方法之一:
HEAD,GET,POST
HTTP的头信息不超出以下几种字段:
Accept,Accept-Language,Content-Language,Content-Type
另外,请求数据的编码格式:只能是 application/x-www-form-urlencoded、multipart/form-data、text/plain三个值中的一个。
◼ 非简单请求:不满足以上条件,就属于非简单请求。
 
(2)跨域请求处理:
◼ 处理简单请求流程:
  浏览器直接发出CORS请求,自动在请求头部信息中加上Origin字段,并告诉服务器这个请求来自哪个源(请求协议+域名+端口)。
 
  服务器收到请求后,会检查这个字段,如果该字段值不在服务器的许可范围内,则会返回正常的HTTP响应,但是其相应的头部信息中不会包含“Access-Control-Allow-Origin”字段值,浏览器发现后,就会抛出异常,提示响应的头部信息中没有这个字段。
如果Origin字段值在服务器的许可范围内,则在服务器的响应头部信息中会加上以下字段:
◆ Access-Control-Allow-Origin:URL地址---必需项,其值为请求头部信息中Origin的值;
◆ Access-Control-Allow-Credentials:true---可选项,布尔值,表示是否允许浏览器发送Cookie,需要在应用程序中进行配置;
◆ Access-Control-Allow-Headers----浏览器可以从跨域请求响应头部信息中获取的属性值,由服务器配置。默认可以获取Cache-Control,Content-Language,Content-Type,Expires,Last-Modified,Pragma 等。
◼ 处理非简单请求流程
对非简单跨域请求,浏览器的请求处理分为两步:
预检请求:询问服务器是否允许当前源的访问;
浏览器请求方式:OPTIONS, 表示这个请求是用来询问的;
头部信息包含:
Origin:请求源
Access-Control-Request-Method: 请求的方法
Access-Control-Request-Headers:额外的头部信息
服务器收到预检信息后,会检查以上3个字段值,以确定是否允许跨域请求,如果有一项不满足要求,则不允许进行跨域请求。
实际请求:如果预检通过,执行实际请求。
 
3、Springboot 中 CORS 机制的应用
在Springboot中,CORS的应用非常简单,可以使用@CrossOrigin注解或配置CORS全局跨域配置类。
 
3.1 @CrossOrigin 注解
Spring 从4.2版本后开始支持 @CrossOrigin 注解实现跨域,这在一定程度上简化了跨域访问的实现,在需要跨域访问的方法或者类上加上这个注解即可。
 
3.2全局配置 CORS 类
  @CrossOrigin 注解可以用在方法上,也可以用在Controller上,但如果每一个方法或控制器类上都加上该注解很繁琐。实际中一般使用全局配置CORS类,即编写一个配置类并实现WebMvcConfigurer接口,然后重写addCorsMappings方法即可。addCorsMappings方法的一些常用参数如下:addMapping:配置项目中可以进行跨域请求处理的路径,可以任意配置,可以
具体到直接请求路径;
allowedOrigins:允许哪些URL可以访问本项目的跨域资源,可以固定单条或者多条内容,如: allowedOrigins("*") ,代表允许任意路径;
allowedMethods:设置允许哪些请求方法类型,可以访问该跨域资源,如:POST、
GET、PUT、OPTIONS、DELETE等;
allowedHeaders:允许所有的请求header访问,可以自定义设置任意请求头信息,如:"X-YYYY-TOKEN";
allowCredentials:是否允许请求带有验证信息,用户是否可以发送、处理cookie;
maxAge(3600):设置允许访问的时间。
 
4 、模拟反向代理,处理跨域问题
  反向代理是相对传统的代理(正向代理)而言的。正向代理是指当客户端无法直接访问目标服务器的资源时,需要在客户端配置代理服务器,客户端可以通过代理服务器提供的服务访问目标服务器的资源。
  反向代理指代理服务器配置在目标服务器端,当用户发来请求时,先由服务器端的代理服务器接收,处理后发送到目标服务器。
  实际开发中,一般使用Nginx服务器在前端服务器上配置反向代理。
posted @ 2023-04-02 15:20  Linqylin  阅读(30)  评论(0编辑  收藏  举报