[SpringBoot+Ajax]跨域资源共享CORS前后端分离简单演示样例
学习链接: 跨域资源共享CORS详解-阮一峰
学习链接: AJAX简介-W3School
所用工具:IntelliJ IDEA 2021.2.1
关键注解:@CrossOrigin
一、简介
1. 样例简介
之前在学习SpringBoot网课时,有讲到CORS跨域资源共享(Cross-origin resource sharing),也是前后端分离基础,出于进一步了解和满足个人好奇心,我试着做了本文章所用的demo,在这里共享。
流程:第一个项目,在不同域的情况下向着第二个项目发送一个请求,拿到数据并展示。而浏览器“同域安全策略”在一般情况下不允许来自其他域的资源请求,但在SpringBoot中,给控制器Controller加上@CrossOrigin便可允许跨域资源请求,可以把响应数据以JSON形式返回。
2. 项目结构
已上传,免费0积分下载项目 link.
两个项目,分别代表前端与后端,对应项目名为 fir 与 sec。
fir:负责前端,端口8082。因为使用了thymeleaf,所以经控制器跳转到demo页面。该页面主要作用为发送Ajax请求到不同域(sec)并获取JSON数据并展示在页面上。(html代码在下面)
sec:后端。端口9999,访问时会返回一个JSON格式的User对象并在控制输出"SEC RECEIVED!"。
3. 样例截图
发送AJAX请求前。
发送AJAX请求,接收并展示。
目标路径。
二、代码
1. 前端项目(fir)
使用thymeleaf模板,经控制器MyController跳转。路径为 http://localhost:8082/fir/
1-1. demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>fir</title>
<script>
function test() {
let r = new XMLHttpRequest();
//请求被成功处理
r.onreadystatechange = function () {
if(r.status==200&&r.readyState==4){
//demo.html控制台输出
console.log("返回的信息:" + r.responseText);
//信息处理 并且展示在页面
let user = JSON.parse(r.responseText);
document.getElementById('name').innerText = "Name: " + user.name;
document.getElementById('words').innerText = "Words: " + user.words;
document.getElementById('date').innerText = "Date: " + user.date;
}
}
// 发送
r.open("GET","http://localhost:9999/sec/demo");
r.send();
}
</script>
</head>
<body>
<h1 style="background-color: aliceblue">获取sec中的控制器内容</h1>
<input type="button" value="点我发送ajax请求" onclick="test()">
<h1 id="name" style="width: 600px;border-color: aqua;border-style: solid;border-width: 3px">
Name Show Up Here
</h1>
<h1 id="words" style="width: 600px;border-color: aqua;border-style: solid;border-width: 3px">
Words Show Up Here
</h1>
<h1 id="date" style="width: 600px;border-color: aqua;border-style: solid;border-width: 3px">
Date Shows Up Here
</h1>
</body>
</html>
1-2. MyController.java
package com.example.fir.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
public class MyController {
@RequestMapping("/")
public String demo(){
return "demo"; //forward跳转至 demo.html 位于项目templates目录
}
}
2. 后端项目(sec)
仅有一控制器SecController,返回User对象JSON格式数据。访问路径为 http://localhost:9999/sec/demo
2-1. SecController.java
package com.example.sec.controller;
import com.example.sec.entity.User;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController //@RestController返回的是JSON格式数据
@CrossOrigin //关键注解,允许可被别人跨域请求资源。
public class SecController {
@RequestMapping("/demo")
public User hello(){
System.out.println("SEC RECEIVED!");
//展示用 简单创建一个User对象
User user = new User("Ouch!","Simple Spring Boot Demo","2021-11-30");
return user;
}
}
2-2. User.java
package com.example.sec.entity;
//name word date
public class User {
private String name;
private String words;
private String date;
public User() {
}
public User(String name, String words, String date) {
this.name = name;
this.words = words;
this.date = date;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getWords() {
return words;
}
public void setWords(String words) {
this.words = words;
}
public String getDate() {
return date;
}
public void setDate(String date) {
this.date = date;
}
}
3. 免费0积分下载 link.
感谢您看完本篇文章,希望能帮到您。如果文章有错误,请留言,诚恳请教。