前后端分离-跨域请求

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

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

        在日常的企业开发中普通的 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目录 下 并引入

3.4 编写index.html

    

  
  
  
  


	发送get请求
	
	
	

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

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

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

好的，本节就到这里。谢谢您的耐心学习！若有不懂可直接问我哦！ 邮箱：[email protected]

下一节 将为大家解决这种跨域出现的问题！