mvc ajax跨域,卓景京干货丨SpringMVC利用@CrossOrigin注解解决ajax跨域

原标题：卓景京干货丨SpringMVC利用@CrossOrigin注解解决ajax跨域

1. 什么是跨域

跨域，即跨站HTTP请求(Cross-site HTTP request)，指发起请求的资源所在域不同于请求指向资源所在域的HTTP请求。

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

当前页面url

被请求页面url

是否跨域

原因

http://www.test.com/

http://www.test.com/index.html

否

同源(协议、域名、端口号相同)

http://www.test.com/

https://www.test.com/index.html

跨域

协议不同(http/https)

http://www.test.com/

http://www.baidu.com/

跨域

主域名不同(test/baidu)

http://www.test.com/

http://blog.test.com/

跨域

子域名不同(www/blog)

http://www.test.com:8080/

http://www.test.com:7001/

跨域

端口号不同(8080/7001)

2. 跨域的应用情景

当我们的项目使用前后端分离，后端主导的开发方式进行前后端协作开发时，常常有如下情景：

1. 后端开发完毕在服务器上进行部署并给前端API文档。

2. 前端在本地进行开发并向远程服务器上部署的后端发送请求。在这种开发过程中，如果前端想要一边开发一边测试接口，就需要使用跨域的方式。

3. 通过注解的方式允许跨域

出于安全原因，浏览器禁止Ajax调用驻留在当前原点之外的资源。跨源资源共享(CORS)是由大多数浏览器实现的W3C规范，允许您灵活地指定什么样的跨域请求被授权，而不是使用一些不太安全和不太强大的策略，如IFRAME或JSONP。

一、跨域(CORS)支持：

Spring Framework 4.2 GA为CORS提供了第一类支持，使您比通常的基于过滤器的解决方案更容易和更强大地配置它。所以springMVC的版本要在4.2或以上版本才支持@CrossOrigin

二、使用方法：

在需要进行跨域访问的Controller中加入@CrossOrigin注解,作用在类上,该类中所有方法可以跨域,也可以单独加上指定方法上允许跨域。

1. @CrossOrigin(origins = "*", maxAge = 3600)

2. @RestController

3. @RequestMapping("/test")

4. public class TestController {

5. }

其中@CrossOrigin中的2个参数：

origins ：允许可访问的域列表,“*”表示允许任何来源

maxAge：准备响应前的缓存持续的最大时间(以秒为单位)。

三、代码演示(此处以springBoot搭建项目)：

Dept实体(隐藏get/set 构造方法):

Emp实体(隐藏get/set 构造方法):

后端控制器完整代码: 使用了@RestController 所有方法返回json

package com.zking.controller;

import java.util.ArrayList;

import java.util.List;

import org.springframework.web.bind.annotation.CrossOrigin;

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

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

import com.zking.entity.Dept;

import com.zking.entity.Emp;

@CrossOrigin

@RestController

public class TestController {

@RequestMapping("/getdata")

public List getData() {

// 创建对象作为模拟数据

Dept d1 = new Dept(101, "开发部", "上海");

Dept d2 = new Dept(102, "人事部", "北京");

List list = new ArrayList<>();

Emp e1 = new Emp(1010, "张三", "测试", 8000D, null, "2019-3-11", 101);

Emp e2 = new Emp(1020, "李四", "研发", 18000D, 800D, "2015-6-21", 101);

Emp e3 = new Emp(1030, "王五", "前端", 10000D, 1000D, "2019-7-14", 102);

Emp e4 = new Emp(1040, "赵六", "测试", 9500D, 6000D, "2015-6-25", 102);

e1.setDept(d1); e2.setDept(d1);

e3.setDept(d2); e4.setDept(d2);

list.add(e1); list.add(e2); list.add(e3); list.add(e4);

return list;

}

}

后端此时编写完成,数据为模拟数据

模板引擎jsrender

一、 jsrender的简单介绍

jsrender是一个JS库，允许您定义一次样板结构并重复使用它来动态生成HTML。JsRender为HTML5开发带来了一个新的模板库，它具有无代码标记语法和高性能，支持创建自定义函数并使用纯粹的基于字符串的渲染。官网说他是“简单直观 功能强大 可扩展的 快如闪电”确实如此。

jsRender 的主要概念：模板、容器和数据。

优先使用场景：元素重复出现；动态加载数据，并前端显示；

二、 基本语法，

•原始赋值：{{:属性名}}，显示原始数据

•转码赋值：{{>属性名}}，显示HTML编码后的数据，让数据原样输出

•控制语句可嵌套使用：◦判断：{{if 表达式}} … {{else}} … {{/if}}

◦循环：{{for 数组}} … {{/for}}

使用原因:当我们从后端拿到json数据想放入页面显示时,在没有使用模板库时，需要我们手动拼接HTML代码和数据，非常麻烦且容易出错，而jsrender.js可以很好解决该问题

使用方法

第一步 下载jsrender

第二步在页面上导入(可配合jquery一起使用)

三、 前端完整代码:

$(function(){

// 异步请求后端地址 拿到返回的json数据

$.post('http://localhost:8080/getdata',function (data) {

// 将数据渲染放入到模板中 并得到拼接好的html代码

var html = $('#tmp').render(data);

// 将代码加入到表格中显示

$('table').append(html)

})

})

编号	姓名	职位	工资	奖金	入职日期	所属部门

// 把需要放入数据的地方用script标记包含 并加上 type="text/x-jsrender" 属性

// 表示模板

{{:empno}}{{:ename}}{{:job}}{{:sal}}{{:comm}}{{:hiredate}}{{:dept.dname}}

=

四、页面效果：

责任编辑：