Angular 4+Spring项目JSON解析错误：无法读取返回字符串AAA

Hey there, let's get this sorted out! That error you're seeing is super common when Angular and your Spring backend don't agree on the response format.

What's Causing the Issue? #

Angular's HttpClient automatically tries to parse every response as JSON by default. But your backend is returning the raw string "AAA"—which isn't valid JSON (valid JSON strings need to be wrapped in double quotes, like "\"AAA\""). When Angular tries to run JSON.parse() on "AAA", it chokes on the first character "A" because it expects a JSON object or array, hence the Unexpected token A error.

Solution 1: Adjust Your Spring Backend to Return Valid JSON #

REST APIs typically use JSON for responses, so this is the cleaner long-term fix. Here's how to update your backend code:

Option 1a: Return a DTO (Data Transfer Object)

Create a simple class to wrap your response string, then return that object—Spring will automatically serialize it to JSON:

// First, define a response DTO
public class LoginVerificationResponse {
    private String result;

    public LoginVerificationResponse(String result) {
        this.result = result;
    }

    // Getter (required for Spring serialization)
    public String getResult() {
        return result;
    }
}

// Update your controller method
@PostMapping("/verifyLogin")
public LoginVerificationResponse verifyLogin(/* your parameters here */) {
    // Your login logic here
    return new LoginVerificationResponse("AAA");
}

This will return {"result":"AAA"} as the response. In your Angular code, you can access the string via response.result.

Option 1b: Return a JSON-Formatted String

If you don't want to create a DTO, you can manually wrap your string in double quotes and set the correct content type:

@PostMapping("/verifyLogin")
public ResponseEntity<String> verifyLogin(/* your parameters here */) {
    String jsonString = "\"AAA\""; // Wrap the string in double quotes to make valid JSON
    return ResponseEntity.ok()
            .contentType(MediaType.APPLICATION_JSON)
            .body(jsonString);
}

This returns the valid JSON string "AAA", which Angular can parse without errors.

Solution 2: Tell Angular to Expect Text Instead of JSON #

If you can't modify the backend (or have a specific reason to keep it returning raw text), you can configure your Angular request to skip JSON parsing.

Update your Angular service code to set responseType: 'text' in the request options:

// In your auth service
import { HttpClient } from '@angular/common/http';

@Injectable()
export class AuthService {
    constructor(private http: HttpClient) {}

    verifyLogin(credentials: any) {
        // Add responseType: 'text' to the request config
        return this.http.post('/api/verifyLogin', credentials, { responseType: 'text' });
    }
}

Then in your onSingin method, you'll receive the raw string directly:

onSingin(form: NgForm) {
    this.authService.verifyLogin(form.value).subscribe(
        (response: string) => {
            console.log("Received response:", response); // This will log "AAA"
            // Your login success logic here
        },
        (error) => {
            console.error("Error during login:", error);
            // Handle other errors here
        }
    );
}

Which Solution Should You Choose? #

• Go with Solution 1 if you can—it follows REST best practices and keeps your API consistent with standard conventions.
• Use Solution 2 only if you have a hard requirement to keep the backend returning raw text.

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