侧边栏壁纸
  • 累计撰写 79 篇文章
  • 累计创建 7 个标签
  • 累计收到 0 条评论

跨域

水龙吟
2022-01-13 / 0 评论 / 0 点赞 / 195 阅读 / 1,546 字
温馨提示:
本文最后更新于 2022-01-13,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

跨域:浏览器对于javascript的同源策略的限制 。
以下情况都属于跨域:

image.png

域名或端口不一致即跨域

跨域问题是浏览器对于ajax请求的一种安全限制:一个页面发起的ajax请求,只能是与当前页域名相同的路径,这能有效的阻止跨站攻击。
因此:跨域问题 是针对ajax的一种限制。
  • 解决跨域问题的方案
解决方案:
	JSONP:	
	nginx:代理
	CORS:推荐
		CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)。
		XMLHttpRequest 对象是核心!
		CORS需要浏览器和服务器同时支持
			浏览器:大部分全部支持
			服务器:不需要改动任何代码,需要带着头信息即可!
			
	CORS:原理:*****
		a.	预检请求
				请求:
					Access-Control-Request-Method: GET
					Access-Control-Request-Headers: X-Custom-Header
				响应:
					- Access-Control-Allow-Origin:可接受的域,是一个具体域名或者*(代表任意域名)
					- Access-Control-Allow-Credentials:是否允许携带cookie,默认情况下,cors不会携带cookie,除非这个值是true
					- Access-Control-Allow-Methods:允许访问的方式
					- Access-Control-Allow-Headers:允许携带的头
					- Access-Control-Max-Age:本次许可的有效时长,单位是秒,过期之前的ajax请求就无需再次进行预检了
					
	如何使用:我们项目中如何解决跨域问题!							
		1.	在后台代码的控制器中添加一个注解:
				@CrossOrigin
				当前服务启动的时候,需要注册到nacos 上!通过网关访问后台微服务
		
		2.	在网关中设置跨域!
				@Bean
				public CorsWebFilter corsWebFilter(){

					//  创建CorsConfiguration
					CorsConfiguration corsConfiguration = new CorsConfiguration();
					corsConfiguration.addAllowedHeader("*"); // 任意请求头
					corsConfiguration.addAllowedOrigin("*"); // 允许任意域名
					corsConfiguration.addAllowedMethod("*"); // GET, POST, PUT 表示任意
					corsConfiguration.setAllowCredentials(true);// 允许携带cookie

					//  需要CorsConfigurationSource 这个对象 是一个接口,所以我们需要当前接口的实现类 UrlBasedCorsConfigurationSource
					UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource();
					//  第一个参数表示路径,第二个参数表示设置跨域的方式等信息 CorsConfiguration
					urlBasedCorsConfigurationSource.registerCorsConfiguration("/**",corsConfiguration);

					//  返回当前对象
					return new CorsWebFilter(urlBasedCorsConfigurationSource);
				}
				
				测试:能否正常访问后台微服务数据!
				
				推荐使用在网关中配置跨域!做全局配置!

0

评论区