句柄響應 - SyntaxError：意外的輸入結束

Question

我嘗試了對REST-API的ReactJS抓取調用，並且想要處理響應。呼叫作品中，我得到迴應，我可以在Chrome開發者工具查看：

function getAllCourses() { 
fetch('http://localhost:8080/course', { 
    method: 'POST', 
    mode: 'no-cors', 
    credentials: 'same-origin', 
    headers: { 
     'Accept': 'application/json', 
     'Content-Type': 'application/json', 
    }, 
    body: JSON.stringify({ 
     objectClass: 'course', 
     crud: '2' 
    }) 
}).then(function (response) { 
    console.log(response); 
    return response.json(); 

}).catch(function (err) { 
    console.log(err) 
}); 
} 

當我嘗試處理響應，我得到了一個「語法錯誤：輸入意外結束」在

return response.json(); 

的執行console.log看起來是這樣的：

我的迴應JSON看起來是這樣的，它是有效的，我jsonlint檢查了它：

[ 
    { 
    "0x1": { 
     "users": [], 
     "lectures": [], 
     "owner": "0x2", 
     "title": "WWI 14 SEA", 
     "description": null, 
     "objectClass": "course", 
     "id": "course_00001" 
    }, 
    "0x2": { 
     "username": "system", 
     "lectures": [], 
     "course": null, 
     "solutions": [], 
     "exercises": [], 
     "roles": [ 
     "0x3", 
     "0x4", 
     "0x5" 
     ], 
     "objectClass": "user", 
     "id": "user_00001" 
    }, 
    "0x3": { 
     "roleName": "ROLE_ADMIN", 
     "objectClass": "role", 
     "id": "role_00001" 
    }, 
    "0x4": { 
     "roleName": "ROLE_STUDENT", 
     "objectClass": "role", 
     "id": "role_00002" 
    }, 
    "0x5": { 
     "roleName": "ROLE_DOCENT", 
     "objectClass": "role", 
     "id": "role_00003" 
    } 
    } 
] 

Answer 1

您需要從您的請求中刪除mode: 'no-cors'設置。那mode: 'no-cors'正是你遇到問題的原因。

A mode: 'no-cors'請求使響應類型opaque。問題中的控制檯日誌片段清楚地表明瞭這一點。而opaque意味着您的前端JavaScript代碼無法看到響應的任何部分，也無法做任何事情。

https://developer.mozilla.org/en-US/docs/Web/API/Request/mode解釋說：

no-cors — JavaScript may not access any properties of the resulting Response

所以設置mode: 'no-cors'的效果基本上是告訴瀏覽器，

我「不要讓前端JavaScript代碼的訪問在任何情況下的反應。」假設您正在爲請求設置mode: 'no-cors'因爲http://localhost:8080/course響應不包括Access-Control-Allow-Origin響應頭或者是因爲瀏覽器的製造OPTIONS reques t爲http://localhost:8080，因爲您的請求是觸發CORS preflight的請求。

但是設置mode: 'no-cors'不是解決這些問題的方法。該解決方案是要麼：

• 配置http://localhost:8080服務器發送Access-Control-Allow-Origin響應報頭和處理OPTIONS請求

• 或從https://github.com/Rob--W/cors-anywhere/或這樣

設置使用代碼CORS代理

Answer 2

在你then你應該檢查響應是否OK返回response.json前：

.then(function (response) { 
    if (!response.ok) { 
     return Promise.reject('some reason'); 
    } 

    return response.json(); 

}) 

如果你想有個錯誤信息在你的拒絕承諾，你可以這樣做：

.then(function (response) { 
    if (!response.ok) { 
     return response.text().then(result => Promise.reject(new Error(result))); 
    } 

    return response.json(); 
})