句柄响应-SyntaxError:使用模式时输入意外结束：“无cors”

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

我知道这个答案可能太晚了，可能已经解决了，但我今天遇到了同样的问题，我只需要在headers散列的末尾添加一个“，”，我就不再得到错误了

export function addContacts(formData) {
  return(dispatch) => {
    dispatch({type: 'POSTING_CONTACTS'});
    console.log(formData)
    return fetch(uri, {
      method: 'POST',
      body: JSON.stringify({contact: {name: formData.name, phone_number: formData.phoneNumber}}),
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json'
      },
    })
    .then(response => {
        return response.json()
      }).then(responseJSON => {
        console.log(responseJSON)
        return dispatch({type: 'ADD_CONTACT', payload: responseJSON});
      })
  }
}     

Answer 2

在中，然后在返回response.json之前，您应该检查响应是否正常：

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

    return response.json();

})

如果希望在拒绝的promise中包含错误消息，可以执行以下操作：

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

    return response.json();
})

Answer 3

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

无cors请求使响应类型不透明。问题中的日志片段显示。不透明意味着您的前端JavaScript代码无法看到响应正文或标题。

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

无COR-JavaScript可能无法访问结果响应的任何属性

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

我想你正在尝试不使用cors，因为http://localhost:8080/course不包括Access Control Allow Originresponse头或其他，因为您的请求触发CORS预飞，因此您的浏览器执行选项预飞。

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

>

或者使用中的代码设置CORS代理https://github.com/Rob--W/cors-anywhere/ 或者类似的（请参阅如何使用CORS代理来解决“无访问控制允许源站标头”问题部分的答案，在尝试从REST API获取数据时，请求的资源上不存在“访问控制允许源站”标头）