角/弹簧靴|错误：SyntaxError：“JSON.parse：JSON 数据的第 1 行第 1 列出现意外字符”

Posted 2023-02-27

【中文标题】角/弹簧靴|错误：SyntaxError：“JSON.parse：JSON 数据的第 1 行第 1 列出现意外字符”

【英文标题】：Angular / Spring Boot | error: SyntaxError: "JSON.parse: unexpected character at line 1 column 1 of the JSON data"

【发布时间】：2020-10-13 10:06:51

【问题描述】：

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

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

我的后端代码如下所示：

AuthController：

@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;

我在这里做错了什么？

【参考方案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 设置为“文本”。我还必须删除 JSON.stringify() 方法并将返回类型设置为 Observable。

【参考方案2】：

因为您的响应（“注册成功”）不是有效的 JSON。

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

return this.http.post<SignUpRequestPayload>

【讨论】：

这取决于您的响应类型，此时您可以将其删除以使用字符串。

我试图完全删除它并用字符串替换类型 --> 同样的错误..