Javascript react.js通过异常发布字符串或json

当有人点击注册时，我用来创建账户的逻辑是：

首先在我的数据库中创建一个

用户

createUser = () =>{
var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://localhost:8080/user/');
xhr.setRequestHeader("Content-Type", "application/json");
xhr.send(JSON.stringify({  }));
let that=this;
xhr.onreadystatechange= function() {
    if (this.readyState === 4 && this.status === 200) {
        that.state.newUser= this.responseText.toString();
    }
};
};

然后在我的数据库中创建

LoginCredential

：

onButtonClick = () =>{

var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://localhost:8080/login/');
xhr.setRequestHeader("Content-Type", "application/json");
this.createUser();
xhr.send(JSON.stringify({ email: this.state.email,passwordHash:this.state.passwordHash,user:JSON.parse(this.state.newUser) }));
};

但这会让我说：

POST时出错http://localhost:8080/login/

400

如果我将第二步的最后一行更改为：

xhr.send（JSON.stringify（{email:this.state.email，passwordHash:this.state.passwordHash，user:JSON.parse（this.state.newUser）}）

主要是在
user:JSON.parse（this.state.newUser）
和
user:this.state.newUser

在第二种方法中，我得到两个例外：

未捕获的语法错误：JSON输入意外结束
未捕获错误：引发了跨原点错误。React无法访问开发中的实际错误对象。
例外情况
Spring Boot
提供：

Resolved[org.springframework.http.converter.httpMessageNodeAbleException:JSON解析错误：无法构造'com.mua.cse616.Model.User'的实例（尽管至少存在一个创建者）：没有可从字符串值（''）反序列化的字符串参数构造函数/工厂方法；嵌套异常为com.fasterxml.jackson.databind.exc.MismatchedInputException:无法构造'com.mua.cse616.Model.User'的实例（尽管至少存在一个创建者）：没有字符串参数构造函数/工厂方法从字符串值（''）反序列化。

这里出了什么问题？如何修复？

this.state.newUser
持有类似以下内容的值
{“userID”：577}

我在服务器端使用Spring Boot。所有
控制器
类都用
@CrossOrigin（origins=”注释http://localhost:3000“”

如果出于某种原因需要，我的
用户
类：

public class User {
    @Id @GeneratedValue Long userID;
    @OneToOne(fetch = FetchType.LAZY,targetEntity = LoginCredential.class)
    @JoinColumn(name = "userID",referencedColumnName = "userID")
    @JsonIgnore
    private LoginCredential loginCredential;
}

public class LoginCredential {
    @Id @GeneratedValue Long userID;
    String eMail;
    String passwordHash;
    @OneToOne(mappedBy = "loginCredential", fetch = FetchType.LAZY)
    User user;
}

和
LoginCredential
class:

public class User {
    @Id @GeneratedValue Long userID;
    @OneToOne(fetch = FetchType.LAZY,targetEntity = LoginCredential.class)
    @JoinColumn(name = "userID",referencedColumnName = "userID")
    @JsonIgnore
    private LoginCredential loginCredential;
}

public class LoginCredential {
    @Id @GeneratedValue Long userID;
    String eMail;
    String passwordHash;
    @OneToOne(mappedBy = "loginCredential", fetch = FetchType.LAZY)
    User user;
}

我认为发生此错误是因为应用程序服务器和客户端都在本地主机上的不同端口上运行。因此，您需要指定您的客户端应用程序，即您的服务器也在同一主机上但在不同端口上运行

首先，在react应用程序中执行以下操作

npm安装http代理中间件--保存

在public/src中添加setupProxy.js文件/


//为网站和api服务器运行不同的端口
constproxy=require（'http-proxy-middleware'）；
module.exports=函数（应用程序）{
使用（代理（'/api/'，{target:'http://localhost:8080/“}”）；//根据需要进行更改
}
前端端口：
3000
，后端端口：
8080
他们有，你真的有解决方案吗？我在没有
http代理中间件的情况下工作过
在我希望之前，我试过你的代码，我得到：
TypeError:无法分配对象的只读属性“exports”
确保你是在fr中创建这个文件的ontend/public/src文件夹，并且您已经在前端安装了npm。