解決前端收到的response是undefined的問題

最近在開專案的時候遇到一個問題,明明後端有回傳資料到前端,到Network也有看到response的資料,但是實際接收到的資料卻是undefined。

原因

後端如果直接回傳純文字的話

會判斷為 text/plain

而不是 application/json

以下範例為Java Spring的範例程式,前端接收到會是text,非JSON:

@RestController
public class TestController
{
@RequestMapping("/getString")
public String getString()
{
return "Hello World";
}
}

解決方法

以下介紹兩種解決方式

  1. 在後端定義好種類

MediaType.APPLICATION_JSON_VALUE (= "application/json")

範例:

@RequestMapping(value = "/getString", method = RequestMethod.GET,
produces = MediaType.APPLICATION_JSON_VALUE)

2. 在Node層塞入型態

如果專案有用到Node作為API的中介層,那麼這個方法會是一種解法

在中間定義種類為JSON

function callPost(url, body, res) {  const promise = fetch(url, {    method: 'POST',    headers: {      'Content-Type': 'application/json; charset=utf-8',    },    body: typeof body === 'object' ? JSON.stringify(body) : body  });  return promise;}

--

--

--

https://blog.yyisyou.tw/ — Web developer, Travel

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Yang Yang

Yang Yang

https://blog.yyisyou.tw/ — Web developer, Travel

More from Medium

What is semantic HTML and why should you use it?

MVC for Dummies (Client-Side)

PageItems differences

The Window Object and var