0

I have already created Rest Endpoint in Java spring boot. It returns appropriate response when I request it via Postman. But when I use react fetch it does not show any response in browser if return is Json.

Spring boot controller:

@RestController
@RequestMapping(path = "/v1/test")
@AllArgsConstructor(onConstructor_ = {@Autowired})
public class TestController {
    ...
}

Below endpoint is returning appropriate response.

  @GetMapping(value = "/helloWorld", produces = MediaType.APPLICATION_JSON_VALUE)
  @ResponseStatus(HttpStatus.OK)
  public String getHelloWorld() {
    return "Hello, World1!";
  }

enter image description here

But when I try to hit below endpoint it returns null when I make fetch request. But it returns appropriate response when I hit it via postman.

  @GetMapping(value = "/testEndpoint", produces = MediaType.APPLICATION_JSON_VALUE)
  @ResponseStatus(HttpStatus.OK)
  public String returnTestResponse() {
    HashMap<String, Object> map = new HashMap<>();
    map.put("key1", "value1");
    map.put("results", "value2");
    return "{\"a\":1, \"b\":\"foo\"}";
  }

enter image description here

Also tried returning POJO object. But still no response.

  @GetMapping(value = "/testModel", produces = MediaType.APPLICATION_JSON_VALUE)
  @ResponseStatus(HttpStatus.OK)
  public SearchResultsModel testModel() {
    this.myService.getSearchResult();
  }

React fetch call:

await fetch(ALL_ARTICLES_ENDPOINT, {
    mode: 'no-cors', 
    method: 'GET',
    redirect: 'follow',
    headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json',
    },
  }).then(response => {
    console.log(response);
  })
  .then(data => {
    console.log('Success:', data);
  }).catch((error) => {
    console.error('Error:', error);
  });
2
  • can you show how you annotated controller class? Commented Mar 15, 2021 at 22:16
  • Updated post. Added controller annotations Commented Mar 15, 2021 at 22:20

2 Answers 2

1

Postman have couple hidden headers which are being sent with all requests. Check Hide auto-generated headers

enter image description here

What you are missing in react call is is Accept header with application/json value

EDIT:

Just saw that you are returning string as json. You need to wrap it in POJO object and return it in returnTestResponse class

SECOND EDIT:

This will work. Try to implement your POJO

@GetMapping(value = "/testEndpoint", produces = MediaType.APPLICATION_JSON_VALUE)
  @ResponseStatus(HttpStatus.OK)
  public YourObject returnTestResponse() {
    HashMap<String, Object> map = new HashMap<>();
    map.put("key1", "value1");
    map.put("results", "value2");
    return new YourObject(map);
  }
Sign up to request clarification or add additional context in comments.

7 Comments

Forgot to mention I already tried adding Accept application/json to my request but output is same. I will update the post
and you can't see any errors in server logs? What's response status code?
It returns 200 OK but no response
Just added EDIT section, check it out
you are still returning String in that method. Return your POJO class or change procudes to application/text
|
0

Issue was caused by adding mode: 'no-cors' option in fetch request. This option helped me to get rid of cors error but it means that in return I won't be able to see body and headers in chrome.

To resolve the issue I removed mode: 'no-cors' and added @CrossOrigin annotation on my spring boot controller.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.