跨域请求

前后端分离架构易产生跨域请求问题,原因是浏览器同源策略,如协议、域名、端口不同时,前端受约束无法接收后端数据。解决方案有CORS,客户端设请求头,服务端识别返回响应头。还可在springboot服务端配置过滤器,微信小程序通过官方服务器转发,设置域名即可访问。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

现在前后端分离的架构设计越来越流行,而当中不免会产生一些跨资源的访问,其中最多的也就是跨域请求的访问。

跨域问题来源

  1. 请求url的协议不同:http和https
  2. 请求url的域名不同
  3. 请求url的端口不同

问题发生的原因是浏览器的同源策略规定在某域下的客户端在没明确授权的情况下,不能读写另一个域的资源。

但是通常亲啊后端的项目部署在不同的服务器或不同的端口。前端想要获取后端的数据,就要发起请求,如果不做一些处理,就会受到同源策略的约束。后端可以受到请求并返回数据,但是前端无法受到数据。

 

解决方案

CORS:这是一个跨域资源共享方案,为了解决跨域问题,通过增加一些列请求头和响应头,规范安全地进行跨站数据传输。

请求头主要包括

请求头解释
OriginOrigin头在跨域请求或预先请求中,标明发起跨域请求的源域名。
Access-Control-Request-MethodAccess-Control-Request-Method头用于表明跨域请求使用的实际HTTP方法
Access-Control-Request-HeadersAccess-Control-Request-Headers用于在预先请求时,告知服务器要发起的跨域请求中会携带的请求头信息
with-credentials跨域请求携带cookie

响应头包括

响应头解释
Access-Control-Allow-OriginAccess-Control-Allow-Origin头中携带了服务器端验证后的允许的跨域请求域名,可以是一个具体的域名或是一个*(表示任意域名)。
Access-Control-Expose-HeadersAccess-Control-Expose-Headers头用于允许返回给跨域请求的响应头列表,在列表中的响应头的内容,才可以被浏览器访问。
Access-Control-Max-AgeAccess-Control-Max-Age用于告知浏览器可以将预先检查请求返回结果缓存的时间,在缓存有效期内,浏览器会使用缓存的预先检查结果判断是否发送跨域请求。
Access-Control-Allow-MethodsAccess-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

 

微信小程序

微信小程序中就不需要关心跨域的问题,因为他是通过微信官方的服务器再进行一次转发,转发后就属于同源资源。

只需要在开发页面中设置服务器域名就能访问服务器的资源了。

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值