标签: fetch-api

我有一个日志记录 API，它在链接之前执行。该链接会将用户重定向到其他地方，并且我在用户重定向之前执行 fetch。所以现在的脚本是这样的：

loggingAPI({
    timestamp: moment()
})
window.location = "http://.......com"

日志记录 api 只是一个普通的获取包装器。

但是，服务器现在没有收到 API 请求。我认为这是因为它甚至没有机会将请求发送到 api。

那么我可以等待请求发送而不等待响应吗？

在 ReactJS 组件中，对重定向到另一个 API 的 API 的 fetch 调用不会返回最终目的地的响应。Fetch 仅返回opaquenull 0 等响应，就好像您的调用失败一样。它甚至没有说它重定向了。但在Chrome的控制台中，“网络”选项卡清楚地显示重定向的调用成功。

            let call = fetch(encodedQueryUrl, {
                method: 'GET',
                cache: 'no-cache',
                mode: 'no-cors',
                redirect: 'follow',
                credentials: 'same-origin'
            }).then((response) => {
                console.log("Response???", response);
                return response;
            });

因此编码的QueryURL响应标头：

Request Method: GET
Status Code: 302 
Referrer Policy: no-referrer-when-downgrade
Access-Control-Allow-Headers: access-control-allow-origin
Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE
Access-Control-Allow-Origin: *
content-length: 0
content-type: text/html; charset=UTF-8

以及 302 响应标头：

Request Method: GET
Status Code: 200 
Referrer Policy: no-referrer-when-downgrade
Access-Control-Allow-Headers: access-control-allow-origin
access-control-allow-methods: GET, POST, GET, …

我几天来一直在努力上传图像。\nI\xe2\x80\x99m 使用这样的 formdata：

let formData = new FormData();\nformData.append(\'file\', {\n  uri: uri,\n  name: `name`,\n  type: `image/jpeg`,\n});\n

iOS 上的 uri 类似于asset-library://asset/pathAndroid 上的content://media/external/images/media/25377.

let options = {\n  method: \'POST\',\n  body: formData,\n  headers: {\n    Accept: \'application/json\',\n    \'Authorization\': \'Bearer \' + token,\n  },\n};\nlet response = await fetch("https://myserverurl", options)\n

我尝试了所有技巧，将图像读取为 blob，删除内容类型，其他库（如 axios 等）\xe2\x80\xa6\n无论如何，我总是收到 400 bad file format 错误。

formdata 中是否缺少 I\xe2\x80\x99m 的内容？\n（在后端我们使用 ASP.NET）

摘要：我想从 GitHub 页面发出 Range 标头请求。然而，在某些浏览器中，此操作会失败 - 可能是由于 Gzip 压缩问题。它适用于 Chrome (v74)，但不适用于 FF (v66)、Mac OS。

目标：我想在所有浏览器中可靠地发出此请求，例如每当发出范围请求时强制将响应类型编码为文本。

我不清楚这种行为是由浏览器、服务器还是两者的某种组合决定的。了解起源有助于定义修复方案——使用 Github 页面会很好，但不是强制性的。

我也不清楚这是否代表一个错误，或者如果是，那么在哪里。（在浏览器、规范等中）

示例测试用例：可能因为这涉及服务器端 gzip 编码，所以示例测试用例不会在本地重现。您需要在 JS 控制台中输入这些命令才能https://abought.github.io/weetabix/重现。

fetch('https://abought.github.io/weetabix/example_data/McDonald_s.csv', {headers: {range: 'bytes=1-100'}} ).then(resp => resp.text());

在 Chrome 中，这会获取响应文本。在 Firefox 中，它给出“解码错误”。

如果我省略resp.text，Firefox 可以完成请求 - 解码错误在于读取正文，而不是任何其他代码。复制为curl显示FF添加了一个--compress标志而Chrome没有。

调查 如果字节范围是 0-100，则请求在 FF 中有效。如果范围是 1-100，则失败。文件的这一部分都是 ASCII 字符。

如果我检查响应标头 ( Array.from(r.headers.entries()))，FF 有一个额外的“内容编码：gz 标志”，我认为这是导致问题的原因。（例如，如果没有秘密解码器指令，gzip 就没有意义）

我尝试添加'accept-encoding': 'identity'到获取请求，但它是禁止的标头，并且通过代码修改它没有效果。

我正在尝试通过应用程序脚本从 graphql API 获取数据。

使用 POST 获取 graphql 数据存在一个问题（Providing query string to fetch from a GraphQL API），但我需要获取的 url 只允许 GET。

我写的代码如下：

function main() {\n  var ss = SpreadsheetApp.getActiveSheet();\n  url = "https://coletum.com/api/graphql?query={answer(formId:7787){answer{nomeDaEmpresa107176,cnpj107177,inscricaoEstadual107178,telefone107179},metaData{userId,userName,source,friendlyId,createdAt,createdAtDevice,createdAtCoordinates,updatedAt,updatedAtCoordinates}}}&token=k4foipsju5ckosk4w8o0w084cc8oos0"\n\n  var response = UrlFetchApp.fetch(url,{method: \'GET\', headers: { \'Content-Type\': \'application/json\'} })\n\n  var lists = JSON.parse((response.getContentText()));\n\n  Logger.log(lists);\n}\n

如果我将网址粘贴到浏览器中，一切正常：

{\n  data: {\n    answer: [\n      {\n        answer: {\n          nomeDaEmpresa107176: "LAVORO",\n          cnpj107177: "26.693.198/0001-20",\n          inscricaoEstadual107178: 12341234,\n          telefone107179: "(66) 1234-1234"\n        },\n        metaData: {\n          userId: 9938,\n          userName: "Mendes",\n          source: "web_private",\n …

我一直在使用这个 API 链接，它允许我以纬度和经度的格式查找地址之间的行程持续时间。当我将此链接粘贴到浏览器上时，我得到一个 JSON 对象，因此“它正在工作”（没有凭据等）。

当我想从 API 获取数据时，挑战就出现了：

fetch(\'http://router.project-osrm.org/trip/v1/driving/-43.20940000000002,-22.911;-48.84870000000001,-26.3045?overview=false\')\n  .then(response => {\n    return response.json()\n  })\n  .then(data => {\n    // Work with JSON data here\n    console.log(data)\n  })\n  .catch(err => {\n    // Do something for an error here\n  })

\n

我在 Firefox 控制台中收到此错误消息：

\n

内容安全策略：页面\xe2\x80\x99s 设置阻止加载http://router.project-osrm.org/trip/v1/driven/-43.20940000000002,-22.911;-48.84870000000001,-26.3045?概述=假（\xe2\x80\x9cconnect-src\xe2\x80\x9d）。

\n

在尝试了多种不同的方法后，我最终放弃了并来到这里寻求帮助。因此，有人可以向我解释一下这个请求有什么问题吗？另外，为什么当我在浏览器上粘贴时它可以工作，但当我通过 fetch 进行粘贴时却不起作用？再说一遍，我意识到我在这个问题中发布的代码会返回我想要接收的数据。为什么在这种情况下它有效？

我遇到一种情况，我需要对 React 中输入的每个字符更改执行 API 请求。当我输入 3 个字母时，将触发 3 个 API 请求。但没有完成请求的顺序。大多数时候，我的最后一个请求首先完成，然后是旧的请求。根据我的要求，我想在新的 API 调用之前取消之前的所有调用。

首先，我确保为我在这里讨论的问题编写一个快速演示https://codesandbox.io/s/exciting-swirles-7cs3s

但本质上，使用该isomorphic-fetch库，我遇到了一个问题，我无法真正获得该函数的值，或者你可能会说，分辨率fetch()。

import fetch from "isomorphic-fetch";

async function test() {
  return await fetch("https://google.com", { mode: "no-cors" });
}

let t = test();
console.log(t);

其结果是

fetch()现在我也考虑了像这样的其他使用方式

fetch("https://google.com", { mode: "no-cors" })
  .then(response => response.text())
  .then(data => console.log(data));

它实际上传递了一个字符串，但如果可能的话，我更喜欢用第一种方法？我也很可能没有正确使用 fetch。

概述
我的React 应用程序托管在github-pages上，PHP API托管在标准付费托管上。

这有效（GET）
当我开始开发我的应用程序时，我遇到了一个非常流行的错误，即Access to fetch at ... has been blocked by CORS policy. 我找到了一个快速修复方法，将其写header("Access-Control-Allow-Origin: *")在 PHP 的第一行中，并且它有效。然而这些是GET 请求。

这不起作用（POST）
这次我有一段代码，我必须在其中使用POST请求并需要访问它的响应。这是负责发送 post 请求的代码段：

const editEvent = async () => {
    const requestOptions = {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', },
        body: JSON.stringify({ eventID: chosenEvent, courseID: courseID, groupID: groupID, time:time, date: date, description: description, typeID: typeID, password: password}),
        mode: 'cors',
    };
    const …

这是整个文件的链接 - asyncActions.js

带有 axios api 的部分 -

const fetchUsers = () => {
  return function (dispatch) {
    dispatch(fetchUsersRrequest());
    axios
      .get("https://jsonplaceholder.typicode.com/users")
      .then((res) => {
        // res.data is the array of users
        const users = res.data.map((user) => user.id);
        dispatch(fetchUsersSuccess(users));
      })
      .catch((error) => {
        // error.message gives the description of message
        dispatch(fetchUsersFaliure(error.message));
      });
  };
};

函数输出 -

{ loading: true, users: [], error: '' }
{
  loading: false,
  users: [
    1, 2, 3, 4,  5,
    6, 7, 8, 9, 10
  ],
  error: …