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

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

当我尝试处理响应时，在

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

---

在

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

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

    return response.json();

})

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

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

    return response.json();
})

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

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

说明：

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

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

我想你正在尝试
不使用cors
，因为
http://localhost:8080/course
不包括
Access Control Allow Origin
response头或其他，因为您的请求触发了，因此您的浏览器正在执行
OPTIONS
preflight

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


配置
http://localhost:8080
服务器发送
访问控制允许来源
响应头并处理
选项
请求


或者使用源代码或类似代码设置CORS代理（请参阅回答中的“如何使用CORS代理解决无访问控制允许源标题”问题部分）


您可以通过在php或其他服务器端点的标题中添加以下行来避免CORS策略的问题：

<?php
header('Access-Control-Allow-Origin: *');
//or
header('Access-Control-Allow-Origin: http://example.com');

// Reading JSON POST using PHP
$json = file_get_contents('php://input');
$jsonObj = json_decode($json);

// Use $jsonObj
print_r($jsonObj->message);

...
// End php
?>

我知道这个答案可能太晚了，可能已经解决了，但我今天遇到了同样的问题，我只需要在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});
      })
  }
}     

只需复制以下代码并将其粘贴到
标记下的web.config文件中

<httpProtocol>  
    <customHeaders>  
     <add name="Access-Control-Allow-Origin" value="*" />  
     <add name="Access-Control-Allow-Headers" value="Content-Type" />  
     <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />  
    </customHeaders>  
  </httpProtocol>  


谢谢，但对我来说这没有帮助。我想知道为什么它不起作用？我的JSON无效吗？为什么我的响应不正常？您的请求可能会由于各种原因而失败，您可以使用响应API找出原因：Log
response.status
、
response.statusText
等等。将打印错误消息。您的JSON很好，是客户端找不到您的服务器。您还可以打开浏览器控制台以获得有用的消息。如果是django localhost server，请安装
github.com/ottoyiu/django cors headers
，然后设置settings.py
cors\u ORIGIN\u ALLOW\u ALL=True
，以便于开发。感谢insight@sideshowbarker！在我的例子中，即使我删除了
模式
，因此它被设置为默认（
cors
，因为我正在发送
请求
），但是当响应是
ok:false
，我仍然会在Promise中得到
json输入的意外结束
。json（）尝试在不使用COR的情况下访问禁止的数据。
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});
      })
  }
}     

<httpProtocol>  
    <customHeaders>  
     <add name="Access-Control-Allow-Origin" value="*" />  
     <add name="Access-Control-Allow-Headers" value="Content-Type" />  
     <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />  
    </customHeaders>  
  </httpProtocol>