处理响应 - SyntaxError:使用模式时意外的输入结束:'no-cors'

Question

我尝试了对REST-API的ReactJS fetch调用,并希望处理响应.通话有效,我收到回复,我可以在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"
    }
  }
]

Answer 1

您需要mode: 'no-cors'从请求中删除该设置.这mode: 'no-cors'正是你遇到的问题的原因.

甲mode: 'no-cors'请求做出反应类型opaque.问题中的控制台日志片段清楚地表明了这一点.并且opaque意味着您的前端JavaScript代码无法查看响应正文或标题.

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

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

因此,设置的效果mode: 'no-cors'主要是告诉浏览器,"不要让前端JavaScript代码在任何情况下访问响应正文或标题."

我想你正在设置mode: 'no-cors'请求,因为响应来自http://localhost:8080/course不包括Access-Control-Allow-Origin响应头或者因为你的浏览器发出OPTIONS请求,http://localhost:8080因为你的请求是触发CORS预检的请求.

但设置mode: 'no-cors'不是解决这些问题的方法.解决方案是:

• 配置http://localhost:8080服务器以发送Access-Control-Allow-Origin响应头并处理OPTIONS请求

• 或者使用https://github.com/Rob--W/cors-anywhere/中的代码设置CORS代理(请参阅如何使用CORS代理来解决"No Access-Control-Allow-Origin"标题"问题的答案的部分没有'访问控制允许来源’标头出现在所请求的资源,当试图从一个REST API获取数据)