SpringBoot 第三课——跨域请求

最新推荐文章于 2024-09-03 22:17:36 发布

原创最新推荐文章于 2024-09-03 22:17:36 发布 · 163 阅读

0 ·

CC 4.0 BY-SA版权

javaWeb 专栏收录该内容

45 篇文章

订阅专栏

现在的很多开发模式是前后端分离的，所以前端页面和后端服务通常不在同一个域中，但是浏览器有一个安全策略，就是不允许跨域请求数据，为什么不允许，可以找相关文章学习。下面我们来解决我们的后端服务允许跨域请求。

本地桌面写一个页面crossdomain.html，通过ajax请求后端数据：


<!DOCTYPE html>
<html style="height: 100%; margin: 0">
<head>
<meta charset="utf-8">
<title>crossdomain</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
</head>
<body >
   <div id = "data" ></div>
<script type="text/javascript">

//ajax请求数据
$.ajax({
    type:"get",
    url:"http:localhost:8080/getByCroDo",
    success:function(data){
       $("#data").text(data);
    },
    error:function(){
    	$("#data").text("数据请求失败");
    }
    });
   
</script>
</body>
</html>

在后端，我们新创建一个方法：

@RequestMapping("/getByCroDo")
public String getCrossDomain() {
   return "response Cross Domain request..";
}

来试试用浏览器打开 crossdomain.html，结果如下：

前端页面和我们的后台服务不在一个域，安全策略导致数据请求失败。那怎么解决呢？很简单，一个注解搞定，如下：

    // 可以被跨域请求的方法
    // @CrossOrigin可以放在方法上，也可以放在类上
    @CrossOrigin(origins="*",allowCredentials="true")
    @RequestMapping("/getByCroDo")
    public String getCrossDomain() {
    	return "response Cross Domain request..";
    }

再来看看：