SpringBoot跨域问题 SpringBoot跨域问题的解决办法实例
GDUT_Ember 人气:0想了解SpringBoot跨域问题的解决办法实例的相关内容吗,GDUT_Ember在本文为您仔细讲解SpringBoot跨域问题的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:springboot跨域问题怎么解决,springboot跨域请求,springboot实现跨域,下面大家一起来学习吧。
谈到跨域问题,首先我们要认识一下浏览器的同源策略
百度百科对同源策略的解释
当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面
当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的,
即检查是否同源,只有和百度同源的脚本才会被执行。 [1]
如果非同源,那么在请求数据时,浏览器会在控制台中报一个异常,提示拒绝访问。
同源策略是浏览器的行为,是为了保护本地数据不被JavaScript代码获取回来的数据污染,因此拦截的是客户端发出的请求回来的数据接收,即请求发送了,服务器响应了,但是无法被浏览器接收。
其实就是,客户端浏览器请求url去获取资源,也就是请求服务器的ip地址加上端口号(http://主机名:端口号),如果服务器所在的Ip地址(http://主机名:端口号)并不一致,这就属于不同源,就产生一个跨域的问题,浏览器会禁止服务端返回数据
解决方法有两种
- 前端制造不符合规则的请求规则
- 后端进行跨域支持(告诉前端别管这些规则了,按我的来)
跨域问题
跨域问题是指下面一些地方不同(至少一处)
- 请求协议不同
- ip地址不同
- 端口号不同
- 请求方式不同
SpringBoot解决跨域问题
/** * @Author: Ember * @Date: 2021/4/26 22:16 * @Description: */ @Configuration public class CorsConfig implements WebMvcConfigurer { @Override public void addCorsMappings (CorsRegistry registry) { String[] allowOrigins ={"http://localhost:8080/","https://www.quyo.fun/"}; //允许所有形式的跨域请求 registry.addMapping ("/**") .allowedOriginPatterns ("*") .allowCredentials (true) .allowedMethods ("GET", "POST", "PUT", "DELETE", "OPTIONS") .allowedHeaders("*") .maxAge (3600); } private CorsConfiguration buildConfig () { CorsConfiguration corsConfiguration = new CorsConfiguration (); List<String> list = new ArrayList<>(); list.add ("*"); corsConfiguration.setAllowedOrigins (list); corsConfiguration.addAllowedOrigin ("*"); corsConfiguration.addAllowedHeader ("*"); corsConfiguration.addAllowedMethod ("*"); return corsConfiguration; } @Bean public CorsFilter corsFilter () { UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource (); source.registerCorsConfiguration ("/**", buildConfig ()); return new CorsFilter (source); } @Bean public HttpMessageConverter<String> responseBodyConverter() { StringHttpMessageConverter converter = new StringHttpMessageConverter( Charset.forName("UTF-8")); return converter; } @Override public void configureMessageConverters(List<HttpMessageConverter<?>> converters) { converters.add(responseBodyConverter()); } }
测试
下面是一个前端AJAX小测试
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <link type="test/css" href="css/style.css" rel="external nofollow" rel="stylesheet"> <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script type="text/javascript"> $(function(){ $("#cors").click( function(){ $.ajax({ headers:{"token":"","Content-Type":"application/json;charset=UTF-8","Access-Control-Allow-Origin":"*"}, url:"http://47.119.112.252/book/index/show/allBlogs", success:function(data){ console.log("start") console.log(data) alert(data); } }) }); }); </script> <body> <input type="button" id="cors" value="core跨域测试" </body> </html>
跨域问题解决。
总结
加载全部内容