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 preflight。

的请求

但设置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 header”问题< / em> No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API ）

的答案部分

Answer 2

在您的then中，您应该在返回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();
})

Answer 3

我知道这个答案可能太晚了，也许已经解决了，但是我今天遇到了同样的问题，我只需要在标题哈希的末尾添加一个'，'，然后我就不再收到错误提示

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 4

您可以通过在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
?>

使用POST请求的工作获取代码模型是：

const data = {
        optPost: 'myAPI',
        message: 'We make a research of fetch'
    };
const endpoint = 'http://example.com/php/phpGetPost.php';

fetch(endpoint, {
    method: 'POST',
    body: JSON.stringify(data)
})
.then((resp) => resp.json())
.then(function(response) {
    console.info('fetch()', response);
    return response;
});

Answer 5

只需复制以下代码，并将其粘贴到您的 web.config 文件下的Results = g.run("START n=node(*) RETURN n.type as type") for Result in Results: if Result.type == 'TRINGLE': print("It is a Triange") elif Result.type == 'CIRCLE': print("It is a Circle") else: print("It is a Square")标签下即可。

<system.webServer>

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

5 个答案: