[SpringBoot+Ajax]跨域资源共享CORS前后端分离简单演示样例

最新推荐文章于 2024-10-28 15:16:13 发布

原创最新推荐文章于 2024-10-28 15:16:13 发布 · 570 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#spring boot #ajax #java #ajax跨域问题

前后端Demo 专栏收录该内容

1 篇文章

订阅专栏

本文提供了一个SpringBoot+Ajax实现跨域资源共享(CORS)的实战样例，通过前端项目(fir)发送AJAX请求到后端项目(sec)获取并展示JSON数据。关键在于后端控制器使用了@CrossOrigin注解允许跨域。前端使用Thymeleaf模板，后端使用@RestController和@CrossOrigin注解。示例详细展示了代码结构、关键文件内容及运行效果截图。

学习链接: 跨域资源共享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;
    }
}