现在前后端分离的架构设计越来越流行,而当中不免会产生一些跨资源的访问,其中最多的也就是跨域请求的访问。
跨域问题来源
- 请求url的协议不同:http和https
- 请求url的域名不同
- 请求url的端口不同
问题发生的原因是浏览器的同源策略规定在某域下的客户端在没明确授权的情况下,不能读写另一个域的资源。
但是通常亲啊后端的项目部署在不同的服务器或不同的端口。前端想要获取后端的数据,就要发起请求,如果不做一些处理,就会受到同源策略的约束。后端可以受到请求并返回数据,但是前端无法受到数据。
解决方案
CORS:这是一个跨域资源共享方案,为了解决跨域问题,通过增加一些列请求头和响应头,规范安全地进行跨站数据传输。
请求头主要包括
请求头 | 解释 |
---|---|
Origin | Origin头在跨域请求或预先请求中,标明发起跨域请求的源域名。 |
Access-Control-Request-Method | Access-Control-Request-Method头用于表明跨域请求使用的实际HTTP方法 |
Access-Control-Request-Headers | Access-Control-Request-Headers用于在预先请求时,告知服务器要发起的跨域请求中会携带的请求头信息 |
with-credentials | 跨域请求携带cookie |
响应头包括
响应头 | 解释 |
---|---|
Access-Control-Allow-Origin | Access-Control-Allow-Origin头中携带了服务器端验证后的允许的跨域请求域名,可以是一个具体的域名或是一个*(表示任意域名)。 |
Access-Control-Expose-Headers | Access-Control-Expose-Headers头用于允许返回给跨域请求的响应头列表,在列表中的响应头的内容,才可以被浏览器访问。 |
Access-Control-Max-Age | Access-Control-Max-Age用于告知浏览器可以将预先检查请求返回结果缓存的时间,在缓存有效期内,浏览器会使用缓存的预先检查结果判断是否发送跨域请求。 |
Access-Control-Allow-Methods | Access-Control-Allow-Methods用于告知浏览器可以在实际发送跨域请求时,可以支持的请求方法,可以是一个具体的方法列表或是一个*(表示任意方法)。 |
使用方法
- 客户端只需要按规范设置请求头
- 服务端按照规范识别并返回响应头,或者安装插件,修改响应框架配置文件等。
方法一:
springboot服务端配置过滤器
@SpringBootApplication
public class CarParkApplication {
public static void main(String[] args) {
SpringApplication.run(CarParkApplication.class, args);
}
/**
* 跨域问题
* @return
*/
private CorsConfiguration buildConfig() {
CorsConfiguration corsConfiguration = new CorsConfiguration();
corsConfiguration.addAllowedOrigin("*");
corsConfiguration.addAllowedHeader("*");
corsConfiguration.addAllowedMethod("*");
/* corsConfiguration.addExposedHeader(HttpHeaderConStant.X_TOTAL_COUNT);*/
return corsConfiguration;
}
/**
* 跨域过滤器
* @return
*/
@Bean
public CorsFilter corsFilter() {
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**", buildConfig()); // 4
return new CorsFilter(source);
}
}
https://segmentfault.com/a/1190000017867312?utm_source=tag-newest
https://yq.aliyun.com/articles/689064
微信小程序
微信小程序中就不需要关心跨域的问题,因为他是通过微信官方的服务器再进行一次转发,转发后就属于同源资源。
只需要在开发页面中设置服务器域名就能访问服务器的资源了。