前后端分离-跨域请求

最新推荐文章于 2025-07-10 10:25:03 发布

ljk903402406

最新推荐文章于 2025-07-10 10:25:03 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

分类专栏：前后端分离

本文链接：https://blog.youkuaiyun.com/ljk903402406/article/details/80157683

前后端分离专栏收录该内容

3 篇文章

订阅专栏

相信大家对于前后端分离这个词很不陌生！

老生常谈，我自己就先发表一点拙见。

在日常的企业开发中普通的 jsp 已经不能适应用户的需求及开发标准。越来越多的公司开始用纯前端来替代 jsp servlet。

而随着开发需求的提升，前端衍生出的技术也越来越多。其中自己较为常用的有 AngularJs, nodejs,vue等。我们会发现这些前端js能够大火的原因，主要是他们可以完美的承载后端。不需要太多复杂的原生ajax与js代码就可以实现动态交互与双向绑定！

而ajax正是前后端分离中重要的一环！

在公司开发中，前后端分离开发也更加快捷，后端人员再也不用等待前端人员的"软磨硬泡"，而前端人员也不需要再顾忌后台数据的更替。这样同向分层的开发大大的降低了人员的损耗和工期延误的风险。

前端后分离思想简单，但是实现并不简单。其中跨域请求就是非常常见的问题。有不少仁人志士就是死在了跨域的道路上。那么我们现在就来简单介绍一个跨域请求。

1 什么是跨域问题？

前台向后台请求数据，但是后台与前台不是同一个域，不在同一个域中的请求，会发生跨域问题。

(注意：域名，端口，协议任一不同就不是同一个域。比如A ：http://localhost:8080 ---》访问B http://localhost:8081)

就会产生跨域！

2 模拟发生跨域问题（我们通过代码来认识什么是跨域问题）:

2.1 使用spring boot来创建一个服务。端口为 8080.如图所示


        2.2 创建好工程后，创建controller(TestController)测试类与实体bean类(ResultBean)
        TestController:
package com.sgoods;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("/test")
public class TestController {
	
	@GetMapping("/get1")
	private ResultBean get1(){
		System.out.println("TestController.get1()");
		return new ResultBean("get1");
	}
}

ResultBean:

package com.sgoods;

public class ResultBean {
	
	

	private String string;

	public ResultBean(String string) {
		this.setString(string);
		// TODO Auto-generated constructor stub
	}

	public String getString() {
		return string;
	}

	public void setString(String string) {
		this.string = string;
	}
	
}

测试打开浏览器输入 localhost:8080/test/get1 试试查看结果若是string:get1 那么恭喜你服务器搭建完成！！！

3 再次创建客户端页面(模拟访问服务)：

3.1创建springboot工程，如下图：

3.2 你所创建的项目在static目录中是空的，那么我们现在可以在static中创建一个index.html

3.3 在index中引入jquery下载相关jquery文件放入static目录下并引入 <script src="jquery-3.3.1.min.js"></script>

3.4 编写index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="jquery-3.3.1.min.js"></script>
  <link rel="stylesheet" href="jasmine-3.1.0/jasmine.css">
  <script src="jasmine-3.1.0/jasmine.js"></script>
  <script src="jasmine-3.1.0/jasmine-html.js"></script>
  <script src="jasmine-3.1.0/boot.js"></script>
</head>
<body>
	<a href="#" onclick="get1();">发送get请求</a>
	<!-- <script type="text/javascript">
		function get1(){//异步访问服务器 控制台查看代码
			$.getJSON("http://localhost:8080/test/get1").then(function(result){
				console.log(result);
			})
		}
	</script> -->
	
	

</body>
</html>

测试点击页面中的a标签查看控制台是否有返回值