解決前端收到的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;
}