前后端分离-跨域请求实现方法

前后端分离-跨域请求实现方法。在日常的企业开发中普通的 jsp 已经不能适应用户的需求及开发标准。越来越多的公司开始用纯前端来替代 jsp servlet。

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

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

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

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

1 什么是跨域问题？

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

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

就会产生跨域！

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

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

2.2 创建好工程后，创建controller(TestController)测试类与实体bean类(ResultBean)

TestController:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

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:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

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

?

1 2 3 4 5 6 7 8 9

<meta charset="UTF-8" /> <title></title> <script src="jquery-3.3.1.min.js"></script><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><a href="#" onclick="get1();">发送get请求</a> <!-- <script type="text/javascript">         function get1(){//异步访问服务器 控制台查看代码             $.getJSON("https://localhost:8080/test/get1").then(function(result){                 console.log(result);             })         }     </script> -->

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

若控制台出现上图所示，则出现了跨域问题！

你一定在想。我的代码没错啊 ？为什么会报错呢？而且并不是服务器的问题，问题发生在浏览器。