Angular / Spring 开机 | 错误：SyntaxError：“JSON.parse：JSON 数据的第 1 行第 1 列出现意外字符”

Question

我目前正在编写一个教程来了解 Spring Boot，目前面临以下问题。

在我的注册过程中（正常工作 -> 用户最终进入数据库）我在浏览器控制台中收到状态代码 200/OK，但还有一条关于语法不正确的错误消息：

我的后端代码如下所示：

认证控制器：

@RestController
@RequestMapping(value = "/api/auth")
@AllArgsConstructor
public class AuthController {

    private final AuthService authService;
    private final RefreshTokenService refreshTokenService;

    @PostMapping(value = "/signup")
    public ResponseEntity<String> signup(@RequestBody RegisterRequest registerRequest) {
        /*
        * RegisterRequest: Through this class we are transferring the user details like username, password and email as part of the RequestBody (DTO)
        * */
        authService.signUp(registerRequest);

        return new ResponseEntity<>("Registration Successful", null, OK);
    }
 ....

认证服务：

  @Transactional
  public void signUp(RegisterRequest registerRequest) {
    User user = new User();

    user.setUsername(registerRequest.getUsername());
    user.setEmail(registerRequest.getEmail());
    user.setPassword(passwordEncoder.encode(registerRequest.getPassword()));
    user.setCreated(now());
    user.setEnabled(false);

    userRepository.save(user);

    String token = generateVerificationToken(user);

    String message  = mailContentBuilder.build("Thank you for signing up to Spring Reddit, please click on the below url to activate your account : "
            + ACTIVATION_EMAIL + "/" + token);

    mailService.sendMail(new NotificationEmail("Please Activate your account", user.get

Email(), message));
    }

使用 DTO：

public class RegisterRequest {
    private String email;
    private String username;
    private String password;
}

我的前端代码如下所示：

注册组件：

  signUp() {
    this.signUpRequestPayload.email = this.signUpForm.get('email').value;
    this.signUpRequestPayload.password = this.signUpForm.get('password').value;
    this.signUpRequestPayload.username = this.signUpForm.get('username').value;

    this.authService.signUp(this.signUpRequestPayload).subscribe((data) => {
      console.log('Sign up successful', data);
    });
  }

认证服务：

@Injectable({
  providedIn: 'root'
})
export class AuthService {

  private headers = new HttpHeaders({ 'Content-Type': 'application/json' });

  constructor(private http: HttpClient) { }

  signUp(signUpRequestPayload: SignUpRequestPayload): Observable<SignUpRequestPayload> {
    const body = JSON.stringify(signUpRequestPayload);
    return this.http.post<SignUpRequestPayload>('http://localhost:8080/api/auth/signup', body, { headers: this.headers });
  }
}

使用的接口：

export class SignUpRequestPayload {
  email: string;
  password: string;
  username: string;
}

我在这里做错了什么？

Answer 1

我是这样解决的：

  signUp(signUpRequestPayload: SignUpRequestPayload): Observable<string> {
    const body = signUpRequestPayload;
    return this.http.post('http://localhost:8080/api/auth/signup', body, { responseType: 'text', headers: this.headers });
  }

我不得不从 post 方法中删除并将 responseType 设置为“text”。 我还必须删除 JSON.stringify() 方法并将返回类型设置为 Observable。

Answer 2

由于您的响应（“注册成功”）无效 JSON。

所以请从下面的行中删除<SignUpRequestPayload>

return this.http.post<SignUpRequestPayload>