Spring Boot - 测试：当返回非 200 响应状态码时，前端能否接收到 JSON 数据

实践

环境

集成开发环境：

Spring Tool Suite 4 
Version: 4.12.1.RELEASE
Build Id: 202110260750
OS: Windows 10, v.10.0, x86_64 / win32

新建项目

新建 Spring Starter Project，其结构如下：

编辑 pom.xml 依赖配置文件，主要引入：

• spring-boot-starter-web
• fastjson

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	
	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.6.2</version>
		<relativePath/> <!-- lookup parent from repository -->
	</parent>
	
	<groupId>com.mk</groupId>
	<artifactId>demo</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<name>demo</name>
	<description>Demo project for Spring Boot</description>
	
	<properties>
		<fastjson.version>1.2.8</fastjson.version>
		<java.version>1.8</java.version>
	</properties>
	
	<dependencies>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-devtools</artifactId>
			<scope>runtime</scope>
			<optional>true</optional>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-configuration-processor</artifactId>
			<optional>true</optional>
		</dependency>
		<dependency>
			<groupId>org.projectlombok</groupId>
			<artifactId>lombok</artifactId>
			<optional>true</optional>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
		</dependency>
		
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>${fastjson.version}</version>
        </dependency>
	</dependencies>

	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
				<configuration>
					<excludes>
						<exclude>
							<groupId>org.projectlombok</groupId>
							<artifactId>lombok</artifactId>
						</exclude>
					</excludes>
				</configuration>
			</plugin>
		</plugins>
	</build>
</project>

新建一个 HelloController 控制器，这里面的方法的主要作用是设置不同的响应状态码，并返回 JSON 数据：

package com.mk.controller;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.http.HttpStatus;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;

import com.fasterxml.jackson.databind.ObjectMapper;

@RestController
public class HelloController {

	private static final ObjectMapper objectMapper = new ObjectMapper();
	
	
	@RequestMapping(method = RequestMethod.GET, path = "ok")
	public void ok(HttpServletRequest request, HttpServletResponse response) throws IOException {
		response.setStatus(HttpStatus.OK.value());
		response.setCharacterEncoding("UTF-8");
		response.setContentType("application/json");
		
		Map<String, Object> result = new HashMap<>();
		result.put("message", HttpStatus.OK.name());
		result.put("ip", request.getRemoteAddr());
		
		PrintWriter writer = response.getWriter();
		writer.write(objectMapper.writeValueAsString(result));
		writer.flush();
		writer.close();
	}
	
	@GetMapping(path = "bad request")
	public void badRequest(HttpServletRequest request, HttpServletResponse response) throws IOException {
		response.setStatus(HttpStatus.BAD_REQUEST.value());
		response.setCharacterEncoding("UTF-8");
		response.setContentType("application/json");
		
		Map<String, Object> result = new HashMap<>();
		result.put("message", HttpStatus.BAD_REQUEST.name());
		result.put("ip", request.getRemoteAddr());
		
		PrintWriter writer = response.getWriter();
		writer.write(objectMapper.writeValueAsString(result));
		writer.flush();
		writer.close();
	}
	
	@GetMapping(path = "unauthorized")
	public void unauthorized(HttpServletRequest request, HttpServletResponse response) throws IOException {
		response.setStatus(HttpStatus.UNAUTHORIZED.value());
		response.setCharacterEncoding("UTF-8");
		response.setContentType("application/json");
		
		Map<String, Object> result = new HashMap<>();
		result.put("message", HttpStatus.UNAUTHORIZED.name());
		result.put("ip", request.getRemoteAddr());
		
		PrintWriter writer = response.getWriter();
		writer.write(objectMapper.writeValueAsString(result));
		writer.flush();
		writer.close();
	}
	
	@GetMapping(path = "forbidden")
	public void forbidden(HttpServletRequest request, HttpServletResponse response) throws IOException {
		response.setStatus(HttpStatus.FORBIDDEN.value());
		response.setCharacterEncoding("UTF-8");
		response.setContentType("application/json");
		
		Map<String, Object> result = new HashMap<>();
		result.put("message", HttpStatus.FORBIDDEN.name());
		result.put("ip", request.getRemoteAddr());
		
		PrintWriter writer = response.getWriter();
		writer.write(objectMapper.writeValueAsString(result));
		writer.flush();
		writer.close();
	}
}

在静态资源目录下，新建一个 index.html 文件，使用 XMLHttpRequest 请求 HelloController 控制器中提供的服务：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Index</title>
    </head>
    <body>
        <input type="button" value="ok" />
        <input type="button" value="bad request" />
        <input type="button" value="unauthorized" />
        <input type="button" value="forbidden" />

        <script type="text/javascript">
            window.onload = (event) => {
//				console.log(event);
                main();
            }
            
            function main() {
				const buttons = document.getElementsByTagName("input");
//				console.log(buttons);
				for(let i = 0; i < buttons.length; i++) {
					const relativePath = buttons[i].value;
					buttons[i].onclick = function(event) {
	                    const xhr = new XMLHttpRequest()
	                    xhr.addEventListener("load", function(event) {
	                        console.log(event);
	                        const DONE = 4;
	                        if (xhr.readyState == DONE) {
	                            console.log(xhr, xhr.status);
	                            console.log(typeof xhr.response, xhr.response);
	                        }
	                    })
	                    xhr.open("GET", relativePath, true);
	                    xhr.responseType = "json";
	                    xhr.send();
	                }
				}
			}
        </script>
    </body>
</html>

测试

运行该项目，接着使用浏览器访问 http://localhost:8080/index.html，分别测试：

从以上测试结果可知，即使在返回非 200 响应状态码时，前端也能接收到 JSON 数据。

参考

Web technology for developers > HTTP > HTTP response status codes