javascript - Spring Boot 无法为对象返回 JSON，但不能为对象列表返回 JSON

Question

我在开发我的第一个 Spring Boot 应用程序时遇到了一个奇怪的问题。配置非常基本:

    <?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 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.pawsec</groupId>
    <artifactId>kitchen</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <packaging>jar</packaging>

    <name>kitchen</name>
    <description>The Kitchen restaurant system</description>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.1.0.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <java.version>1.8</java.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-aop</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency> 
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>com.pawsec</groupId>
            <artifactId>common</artifactId>
            <version>1.0</version>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <executable>true</executable>
                </configuration>
            </plugin>
        </plugins>
    </build>


</project>

我们在调用这两个服务的页面上有一些 Javascript 代码。当 Controller 在第一个方法中返回一个 Guy 对象时，我们得到一个空响应:

    {data: "", status: 200, statusText: "", headers: {…}, config: {…}, …}
config: {adapter: ƒ, transformRequest: {…}, transformResponse: {…}, timeout: 0, xsrfCookieName: "XSRF-TOKEN", …}
data: ""
headers: {}
request: XMLHttpRequest {onreadystatechange: ƒ, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}
status: 200
statusText: ""
: Object

然而，当我们从第二种方法返回一个 Guy 对象列表时，我们得到了完整的 Json 结构

back:
{data: Array(3), status: 200, statusText: "", headers: {…}, config: {…}, …}
config: {adapter: ƒ, transformRequest: {…}, transformResponse: {…}, timeout: 0, xsrfCookieName: "XSRF-TOKEN", …}
data: Array(3)
0: {guyId: 1, name: "Walter Sobchak", age: 45}
1: {guyId: 2, name: "Jeffrey Lebowski", age: 42}
2: {guyId: 3, name: "Theodore Donald Kerabatsos", age: 39}
length: 3
: Array(0)
headers: {content-type: "application/json;charset=UTF-8", cache-control: "private", expires: "Thu, 01 Jan 1970 00:00:00 GMT"}
request: XMLHttpRequest {onreadystatechange: ƒ, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}
status: 200
statusText: ""
: Object

Controller 看起来像这样:

package com.pawsec.kitchen.controller;

import java.util.ArrayList;
import java.util.List;

import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;

import com.pawsec.kitchen.model.Guy;

@RestController
public class GuyController {

    @RequestMapping(value="/get/guy/{guyId}", method=RequestMethod.GET,
            headers={"Accept=application/json"})
    public Guy getGuy(@PathVariable("guyId") int guyId) {
        Guy someGuy = new Guy(guyId, "Walter Sobchak", 45);
        return someGuy;
    }

    @RequestMapping(value="/get/guys", method=RequestMethod.GET,
            headers={"Accept=application/json"})
    public List<Guy> getGuys() {
        Guy walter = new Guy(1, "Walter Sobchak", 45);
        Guy theDude = new Guy(2, "Jeffrey Lebowski", 42);
        Guy donny = new Guy(3, "Theodore Donald Kerabatsos", 39);
        List<Guy> guys = new ArrayList<Guy>();
        guys.add(walter);
        guys.add(theDude);
        guys.add(donny);
        return guys;
    }

}

奇怪的是，如果我从浏览器调用这两个服务，我会为这两个调用获得正确的 Json 结构。

当我运行 mvn dependency:tree 时，基本引导项目附带的预期 Jackson 依赖项就在那里。

这是 JavaScript 代码的样子:

return dispatch => {
        dispatch(fetchMenuStart());
        const url = 'https://boot.ourcompany.com:8443/get/guy/1'; 
        const headers = {
            headers: {
                'Content-Type': 'application/json'
            }
        }
        axios.get(url, headers)
            .then(res => {
                console.log(res); 
                dispatch(fetchMenuSuccess(res.data.categories, res.data.restaurant));
            })
            .catch(error => {   
                console.log("error", error);
                const errorMsg = 'There was an error fetching the menu';
                dispatch(fetchMenuFail(errorMsg)); 
            });
    };

任何人都可以建议可能导致此问题的原因或测试步骤以找出问题吗？

新的 javascript 示例代码:

const doesNotWork = 'https://boot.exmpledomain.com:8443/get/guy/1'; 
const doesWork = 'https://boot.exmpledomain.com:8443/get/guys'; 
const headers = {
    headers: {
    'Content-Type': 'application/json;charset=UTF-8'
    }
}
axios.get(doesNotWork, headers)
    .then(res => {
        console.log(res); 
    })
    .catch(error => {   
        console.log("error", error);
        const errorMsg = 'There was an error fetching the menu';
    });

Answer 1

能否请您尝试更改 header 以在 javascript 中接受

return dispatch => {
        dispatch(fetchMenuStart());
        const url = 'https://boot.ourcompany.com:8443/get/guy/1'; 
        const headers = {
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json'
            }
        }
        axios.get(url, headers)
            .then(res => {
                console.log(res); 
                dispatch(fetchMenuSuccess(res.data.categories, res.data.restaurant));
            })
            .catch(error => {   
                console.log("error", error);
                const errorMsg = 'There was an error fetching the menu';
                dispatch(fetchMenuFail(errorMsg)); 
            });
    };