無法使用 Fetch API 獲取 JSON，但可以使用 JQuery

Question

我正在將一個 React 項目集成到 Grails/Angular 系統中，並且我正在嘗試使用來自 React 的 Fetch API 查詢 Grails。

應用程序運行並打開 Chrome 開發人員工具控制台后，以下內容按預期工作：

$.get('/project/controller/get', function(data, status) {
  console.log(data); 
});

它顯示一堆 JSON，如下所示：

以下不按預期工作：

fetch('/project/controller/get', {
    credentials: 'include',
    headers: {
        'Content-Type': 'application/json'
    }
})
.then(response => response.json())
.then(response => console.log(response))
.catch(error => console.log(error))

它給出了一個語法錯誤，因為它試圖將 HTML 文檔解析為 JSON。

在開發者工具網絡選項卡中，我看到當我發出 JQuery 請求時，只有一個 GET 請求，而服務器響應是我想要的 JSON。

當我使用 Fetch API 發出請求時，會出現兩個請求：

• 一個到 /project/controller/get，它只響應狀態碼 302，沒有 JSON
• 另一個 to /project 響應狀態代碼 200，以及應用程序首頁的 HTML。 這是 Fetch API 接收並嘗試解析為 JSON 的內容。

在執行渲染為 JSON 語句之前，我可以驗證 Grails 控制器方法是否按預期生成數據。

使用 Axios 也會發生同樣的事情。

JQuery 請求詳情：

一般的

請求地址： http://localhost:8080/project/controller/get

請求方式：GET

狀態碼：200 OK

遠程地址:[::1]:8080

推薦人政策：降級時不推薦人

響應頭

HTTP/1.1 200 正常

服務器：Apache-Coyote/1.1

內容類型：文本/html；字符集=utf-8

傳輸編碼：分塊

日期：2017 年 10 月 6 日星期五 02:41:59 GMT

請求頭

獲取/項目/控制器/獲取 HTTP/1.1

主機：本地主機：8080

連接：保持連接

接受： /

X-Requested-With: XMLHttpRequest

用戶代理：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36

引用者： http://localhost:8080/project/settings/

接受編碼：gzip、deflate、br

接受語言：en-GB,en;q=0.8,en-US;q=0.6,fr;q=0.4,ru;q=0.2

曲奇：JSESSIONID=52F86C47C43F558E05C2F6DB5E9E7CE2

有什么辦法可以讓它發揮作用嗎？ 謝謝。

---

我剛剛注意到由於某種原因在瀏覽器中輸入http://localhost:8080/project/controller/get 會自動將我重定向到http://localhost:8080/project 。 可能是服務器做了一些奇怪的事情，但奇怪的是 JQuery 請求有效......

Answer 1

它給出了一個語法錯誤，因為它試圖將 HTML 文檔解析為 JSON。

如果響應是 HTML 使用Response.text()

Answer 2

302 是重定向，因此您的提取請求被重定向到另一個頁面，可能是登錄頁面（？）

我在您的 fetch 請求中看到您正在使用credentials:'include' ，也許這包括 Authorization 標頭或類似的東西，並且您的控制器拒絕了該請求。

使用 chrome 開發者控制台，如果您在網絡選項卡上標記“保留日志”，則可以檢查請求