SpringBoot跨域问题解决

最新推荐文章于 2024-05-05 17:15:41 发布

GDUT_Ember

最新推荐文章于 2024-05-05 17:15:41 发布

阅读量920

点赞数 3

分类专栏： SpringBoot 文章标签： spring boot

本文链接：https://blog.csdn.net/GDUT_Trim/article/details/116176941

版权

SpringBoot 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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="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>

在这里插入图片描述
跨域问题解决。

GDUT_Ember

关注

3
点赞
踩
40

收藏

觉得还不错? 一键收藏
6
评论
SpringBoot跨域问题解决

SpringBoot跨域问题解决谈到跨域问题，首先我们要认识一下浏览器的同源策略百度百科对同源策略的解释当一个浏览器的两个tab页中分别打开来百度和谷歌的页面当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的，即检查是否同源，只有和百度同源的脚本才会被执行。 [1]如果非同源，那么在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问。同源策略是浏览器的行为，是为了保护本地数据不被JavaScript代码获取回来的数据污染，因此拦截的是客户端发出的请求回来的数据接收，即
复制链接

扫一扫