处理响应 - SyntaxError：使用模式时出现意外的输入结束：“no-cors”

我尝试了对 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)
});
}

当我尝试处理响应时，我收到“SyntaxError：意外的输入结束”

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"
    }
  }
]

您需要删除mode: 'no-cors'根据您的要求进行设置。环境no-cors模式正是导致您遇到问题的原因。

A no-cors请求使响应类型opaque。问题中的日志片段表明了这一点。Opaque意味着您的前端 JavaScript 代码看不到响应正文或标头。

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

no-cors— JavaScript 可能无法访问结果的任何属性Response

所以设置的效果no-cors模式本质上是告诉浏览器，“在任何情况下都不要让前端 JavaScript 代码访问响应正文或标头。”

人们有时会尝试设置no-cors当响应不包含以下内容时的模式Access-Control-Allow-Origin响应标头，否则因为该请求会触发CORS 预检，所以你的浏览器会执行OPTIONS飞行前。

但使用no-cors模式并不能解决这些问题。解决方案是：

• 配置您向其发出请求的服务器，以便它发送Access-Control-Allow-Origin响应标头，并使其处理OPTIONS要求

• 或使用以下代码设置 CORS 代理https://github.com/Rob--W/cors-anywhere/或诸如此类；看到如何使用 CORS 代理来解决“No Access-Control-Allow-Origin header”问题答案部分位于尝试从 REST API 获取数据时，请求的资源上不存在“Access-Control-Allow-Origin”标头