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

问题描述

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

function getAllCourses() {fetch('http://localhost:8080/course', {方法:'POST'，模式:'no-cors'，凭据:'同源'，标题:{'接受':'应用程序/json'，'内容类型':'应用程序/json'，},正文:JSON.stringify({对象类:'课程'，粗粮:'2'})}).then(函数(响应){控制台日志(响应)；返回 response.json();}).catch(函数(错误){控制台日志(错误)});}

当我尝试处理响应时，我在

处收到SyntaxError: Unexpected end of input"

返回 response.json();

console.log 如下所示:

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

<预><代码>[{0x1":{用户":[]，讲座":[]，所有者":0x2"，"title": "第一次世界大战 14 海",描述":空，"objectClass": "课程","id": "course_00001"},0x2":{"用户名": "系统",讲座":[]，课程":空，解决方案":[]，练习":[]，角色":["0x3","0x4",0x5"],"objectClass": "用户",id":user_00001"},0x3":{"roleName": "ROLE_ADMIN","objectClass": "角色",id":role_00001"},0x4":{"roleName": "ROLE_STUDENT","objectClass": "角色","id": "role_00002"},0x5":{"roleName": "ROLE_DOCENT","objectClass": "角色",id":role_00003"}}]

解决方案

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

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

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

<块引用>

no-cors — JavaScript 可能无法访问结果 Response

的任何属性

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

我想您正在尝试 no-cors 因为来自 http://localhost:8080/course 的响应不包括 Access-Control-Allow-Origin 响应标头，否则因为您的请求会触发 CORS 预检，因此您的浏览器会进行 OPTIONS 预检.

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

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

• 或使用来自 https://github 的代码设置 CORS 代理.com/Rob--W/cors-anywhere/ 等(请参阅如何使用 CORS 代理解决无访问控制-允许-源头"问题部分答案在 尝试从 REST API 获取数据时，请求的资源上不存在Access-Control-Allow-Origin"标头)

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)
});
}

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

return response.json();

The console.log looks like this:

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

解决方案

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

A no-cors request makes the response type opaque. The log snippet in the question shows that. 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 may not access any properties of the resulting Response

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

I imagine you’re trying no-cors because the response from http://localhost:8080/course doesn’t include the Access-Control-Allow-Origin response header or else because your request is one that triggers a CORS preflight, and so your browser does an OPTIONS preflight.

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

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

• 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屋！