如何在我的 angular 应用程序中调用和使用 spring REST POST API 返回没有正文的字符串？

Question

I am trying to access the POST API from my spring app to angular but little bit confused how to use and access the given API in my angular app.

Spring REST API

@RequestMapping(value = "/getWelcomeMessage", method = RequestMethod.POST)
    public String getLoginWelcomeMessage() {
        return details.getLoginWelcomeMessage();
    }
    

The given API is fetching the welcome message details from my oracle DB and returning a string value. I am trying to access the given REST API in my angular code through services. I had define the post service as follows

export class LoginService {

  constructor(private http : HttpClient) { }

  welcomeMessageService(){
    const headers = {'content-type':'application/text'}
    return this.http.put("http://localhost:8080/API/getWelcomeMessage",null,
    {'headers':headers});
  }

}

As the post method requires three arguments URL, Body and header. But in my case my spring REST API doesn't contain any body and returning a string. So, I had define the body as null and change the header type to text as it is JASON by default.

At last, I am trying to access the given service method by injecting it in my component as follows-

export class LoginComponent implements OnInit {

  message:string;

  constructor(private loginService : LoginService) { }

  ngOnInit(): void {
    this.loginService.welcomeMessageService().subscribe(
      response =>{
        console.log(response);
        this.message = response;
      }
    )
  }

}

But when I am trying to assign the response to the string I am getting the error that string cannot be assigned to the object. I am little bit confused why this error is occurring as I had also changed the header type to string while defining my service but still getting the error.

It can be a great help if anybody guide me regarding this as I am new to angular and little bit confused with integration part of API with angular.

Answer 1

Use { responseType: 'text' } and also send an empty body not null

export class LoginService {

  constructor(private http : HttpClient) { }

  welcomeMessageService(){
    return this.http.put("http://localhost:8080/API/getWelcomeMessage",{},
    { responseType: 'text' });
  }

}

Maybe you have copied the function wrong but check also here

@RequestMapping(value = "/getWelcomeMessage", method = RequestMethod.POST)
    public String getLoginWelcomeMessage() {
        return details.getLoginWelcomeMessage();
    }
    

This is a Post method not a put that you are trying to call

As for cors error add the following to the backend just above @Controller or @RestControler whatever you have

@CrossOrigin(value = {"http://localhost:4200"}, methods = {GET,POST,PUT,DELETE})