如何从Svelte前端向Quarkus后端传递JSON对象？

核心问题 #

前端axios请求的参数传递方式错误，导致后端无法正确解析JSON请求体，User对象实例化失败，最终抛出NullPointerException。

前端代码修正 #

你当前的axios调用把请求体数据错误放在了params字段中——params是用于拼接URL查询参数的，POST请求的请求体需要直接作为axios.post的第二个参数，headers等配置项单独作为第三个参数传入。

修正后的前端代码：

let endpoint = "http://localhost:8080/api/users/search";

async function apiCall() {
  try {
    // 请求体直接作为第二个参数，配置项放在第三个参数
    const res = await axios.post(
      endpoint,
      { name: 'John', surname: 'Doe' }, // 正确传递JSON请求体
      { headers: {} } // 可选配置项，空headers可省略
    );

    //...
  } catch (e) {
    console.error(e); // 建议添加错误日志便于排查
  }
}

后端必要检查 #

1. 确保User类符合JavaBean规范：Quarkus依赖反射绑定JSON数据，User类必须有无参构造方法，且为name、surname字段提供对应的getter/setter方法。示例：

public class User {
    private String name;
    private String surname;

    // 必须保留无参构造
    public User() {}

    // getter和setter方法
    public String getName() { return name; }
    public void setName(String name) { this.name = name; }
    public String getSurname() { return surname; }
    public void setSurname(String surname) { this.surname = surname; }
}

也可以用Lombok的@Data注解自动生成这些方法，简化代码。

2. 字段名大小写匹配：前端传递的字段名（name、surname）要和User类的字段名完全一致（JSON绑定大小写敏感）。

验证方法 #

1. 用curl或Postman直接测试后端接口，确认服务端逻辑正常：

curl -X POST -H "Content-Type: application/json" -d '{"name":"John","surname":"Doe"}' http://localhost:8080/api/users/search

2. 前端修正后，打开浏览器开发者工具的Network面板，查看请求的Request Body是否正确携带了JSON数据。

内容的提问来源于stack exchange，提问作者JLLMNCHR