处理响应 - SyntaxError：使用模式时意外的输入结束：'no-cors' [英] Handle response - SyntaxError: Unexpected end of input when using mode: 'no-cors'

问题描述

我尝试了对REST-API的ReactJS fetch调用，并希望处理响应。通话有效，我收到回复，我可以在Chrome开发工具中看到：

I tried a ReactJS fetch call to a REST-API and want to handle the response. The call works, i get a response, which i can see in Chrome Dev Tools:

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：意外结束输入at

When i try to handle the response, i got a "SyntaxError: Unexpected end of input" at

return response.json();

console.log如下所示：

The console.log looks like this:

我的响应JSON看起来像这样，它是有效的，我用jsonlint检查它：

My Response JSON looks like this, it is valid, i checked it with 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"
    }
  }
]

推荐答案

您需要删除模式：'no-cors'设置请求。那个模式：'no-cors'正是你遇到问题的原因。

You need to remove the mode: 'no-cors' setting from your request. That mode: 'no-cors' is exactly the cause of the problem you’re having.

A mode：'no-cors' request使响应类型为 opaque 。问题中的控制台日志片段清楚地表明了这一点。并且 opaque 表示您的前端JavaScript代码无法看到响应正文或标题。

A mode: 'no-cors' request makes the response type opaque. The console-log snippet in the question clearly shows that. And opaque means your frontend JavaScript code can’t see the response body or headers.

解释：

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

no-cors - JavaScript可能不能访问结果响应的任何属性

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

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

So the effect of setting mode: 'no-cors' is essentially to tell browsers, "Don’t let frontend JavaScript code access the response body or headers under any circumstances."

我想你正在为请求设置模式：'no-cors'，因为来自<的响应code> http：// localhost：8080 / course 不包含 Access-Control-Allow-Origin 响应标头或因为您的浏览器正在向 http：// localho发出 OPTIONS 请求st：8080 因为您的请求是触发 CORS预检。

I imagine you’re setting mode: 'no-cors' for the request because the response from http://localhost:8080/course doesn’t include the Access-Control-Allow-Origin response header or because your browser’s making an OPTIONS request to http://localhost:8080 because your request is one that triggers a CORS preflight.

但设置模式：'no-cors'不是解决这些问题。解决方案是：

But setting mode: 'no-cors' is not the solution to those problems. The solution is either to:

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

• configure the http://localhost:8080 server to send the Access-Control-Allow-Origin response header and to handle the OPTIONS request

或使用 https://github.com/Rob--W/cors-anywhere/ 等（参见如何使用CORS代理来解决无访问控制 - 允许 - 在 部分-the-requested-resource-whe / 43881141＃43881141>在尝试从REST API获取数据时，请求的资源上没有'Access-Control-Allow-Origin'标头 ）

or set up a CORS proxy using code from https://github.com/Rob--W/cors-anywhere/ or such (see the How to use a CORS proxy to get around "No Access-Control-Allow-Origin header" problems section of the answer at No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API)

这篇关于处理响应 - SyntaxError：使用模式时意外的输入结束：'no-cors'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！