谈到跨域问题,首先我们要认识一下浏览器的同源策略

百度百科对同源策略的解释

当一个浏览器的两个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>

跨域问题解决。

总结

到此这篇关于springboot跨域问题解决的文章就介绍到这了,更多相关springboot跨域问题内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持www.887551.com!