通过 JavaScript 的 POST 方法不是从 API 检索数据，而是在 Postman 中检索数据答案

【问题标题】：POST method through JavaScript not retrieving data from API but retrieve data in Postman通过 JavaScript 的 POST 方法不是从 API 检索数据，而是在 Postman 中检索数据
【发布时间】：2020-05-10 10:45:39
【问题描述】：

我正在尝试使用 JavaScript 从 API 获取数据，这个 API 在 Postman 中工作，但在 javaScript 中不工作。

此代码在控制台中显示为未能获取响应数据且未定义：

<!DOCTYPE html>
<html>
<head>
    <meta charset="ISO-8859-1">
    <title>Insert title here</title>
</head>
<body>
    <h2> only fetch APi</h2>

    <script>
    fetch('https://smweb.in/hungaroo/app/api/plan_list', {
        method: 'POST',
        mode: 'no-cors',
        redirect: 'follow',
        headers: {
            "Accept": "application/json",
            "Access-Control-Allow-Origin": "*",
            "Content-Type": "application/json"
        }
    })
    .then(function (response) {
        return response.text();
    })
    .then(function(data) {
        console.log(data);
    })
    </script>
</body>
</html>

【问题讨论】：

您在控制台中遇到了什么错误
它什么也没给。喜欢它将消息显示为未定义并且无法获取响应数据。
不如试试ajax方法
csrf 令牌是什么意思？以及如何以及为什么要添加它？我是新手，我不知道如何添加它。你能帮帮我吗？
不..这与您的要求无关。 CSRF Token 用于框架。您使用任何框架吗？

标签： javascript ajax api fetch postman

【解决方案1】：

似乎此代码产生了不透明的响应（使用请求模式：'no-cors'）。不透明的响应没有正文，因此在尝试记录响应时您什么也得不到。 Access-Control-Allow-Origin 是一个响应头，所以它应该设置在由源（服务器）发送的响应对象中，而不是在请求中。没有这个，您将不会从服务器获得有意义的响应。向您的请求添加 mode:'no-cors' 是一种从响应标头中未设置 Access-Control-Allow-Origin 的端点获取不透明响应的黑客方法。此处进一步说明：

Trying to use fetch and pass in mode: no-cors

how to process fetch response from an 'opaque' type?

那为什么邮递员工作呢？我发现这篇文章很有用：https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

似乎 Fetch API 遵循同源策略，而 Postman 却没有。

【讨论】：