跨域处理

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服务器在前端服务器上配置反向代理。