标签: fetch-api

我试图通过代码使用我的 api 我收到此错误

object`（“[object Response]”）无法序列化为 JSON

但是当我通过浏览器调用或使用这个 api 时，我得到了响应。

这是我的代码 https://codesandbox.io/s/naughty-platform-1xket?file=/pages/index.js

我像这样使用我的 api

 console.log("-----");
  const cc = await fetch("https://1xket.sse.codesandbox.io/api/basecss/");
  console.log(cc, "llll");

API设计

export default async (req, res) => {
  const stylesheet = await (
    await fetch("https://www.****.com/asset/web/css/***-base.css", {})
  ).text();
  console.log(stylesheet, "server");
  res.status(200).send(stylesheet);
};

我在服务器上获取此控制台值。但是当我通过代码调用这个 api 时，我收到了这个错误

object` ("[object Response]") cannot be serialized as JSON. Please only return JSON serializable data types

我正在尝试使用签名 URL 从前端通过 fetch 上传到 GCP，但遇到了持续存在的 CORS 问题。

要上传的文件是否应该嵌入到signedurl中，或者发送到请求正文中的signedurl？

这是错误：

Access to fetch at <signedurl> from origin 'http://my.domain.com:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

这是存储桶上的 CORS 配置：

[
    {
      "origin": ["http://gcs.wuddit.com:3000"],
      "responseHeader": ["Content-Type", "Authorization",  "Content-Length", "User-Agent", "x-goog-resumable", "Access-Control-Allow-Origin"],
      "method": ["GET", "POST", "PUT", "DELETE"],
      "maxAgeSeconds": 3600
    }
]

这是获取调用：

const uploadHandler = async (theFile, signedUrl) => {
  try {
    const response …

好吧，最近几天我一直在优化客户表。

有很多 10k+ 的客户端，显然该表需要很长时间才能加载。前端团队完成了分页+过滤器+重新排序，我希望保持这种方式。

所以我开始尝试通过 AJAX 注入渲染的 HTML，这显然很糟糕。速度可以接受，但是内存消耗巨大，之后表速度非常慢。

之后，我尝试通过 AJAX 以 JSON 格式加载数据，并使用 javascript 附加到表中。

我尝试了多种方法来执行此操作，最好的方法是一次处理 500-1000 个客户端，但完成该表需要 30 多秒，并且在此期间页面速度很慢。

我坚持不懈，并设法在后端节省了几秒钟的时间，但是，如果我只是在浏览器上加载 API，结果会立即出现，并且每次调用不会花费 10 秒以上的时间。

这是当我尝试 XMLHttpRequest 时，它产生了或多或少相同的结果。然后我发现了 fetch，这太神奇了。使用 fetch 现在只需不到 3 秒即可完全加载表。

所以我的问题是，为什么？是的，如果我深入研究文档，我可能会找出原因，但我只是非常忙碌并且非常好奇，肯定有人已经知道这一点。

PS如果有人对我正在使用的代码感到好奇：

最佳解决方案（获取）

for (var jj of {{ ret|safe }}) {
          fetch("/clients/table/build1/?start="+String(jj)).then(function (response) {
              response.json().then(function (request) {
                  for (let i = 0; i < request['results'].length; i++) {
                  $("#myAllClient_1").DataTable().row.add(<<CLIENT DATA>>)
                  }
            $("#myAllClient_1").DataTable().draw(false);
            <<bit more code>>

慢ajax代码：

$.ajax({
          method: "GET",
          dataType: "JSON",
          url: "/clients/table/build1/?start=" + snum,
          success: function (data) { …

我可以从 localStorage 检索 JWT 令牌并将其req.body发送到headers.Authorization. 我可以在客户端记录令牌，但不会在服务器上收到它。

客户：React、Redux-Saga。

function* getInitialStateFetch(){

  var actionType = 'GET_INITIALSTATE_REDUCER';
  var path = 'react/listings28';

  var token = localStorage.getItem('my_tkn');
  console.log(token) // logs token

  var httpHeaders;

  if(token){
  httpHeaders = { 
    'Content-Type' : 'application/x-www-form-urlencoded', 
    'Accept' : 'application/json',
    'Authorization' : `Bearer ${token}`
  };
  } else {
    httpHeaders = { 
      'Content-Type' : 'application/x-www-form-urlencoded', 
      'Accept' : 'application/json'
    };
  }

  let options = {
    method: 'GET',
    mode: 'no-cors',
    headers: new Headers(httpHeaders),
    credentials: 'same-origin'
  };

  yield call(apiCall, path, options, actionType);
} …

我试图通过使用 Fetch API 调用我自己的 API 来保存我的数据。但后来的结果是不断回来415 Unsupported Media Type。

客户端使用 React JS 和 .NET Core MVC。服务器端使用托管在 Windows Server 2012 上的 .NET Core Web API。

我已经尝试了网络中提供的所有解决方案，但仍然出现 415 错误。在 IIS 方面，我已经添加Content-Type并Accept接受application/json和text/plain。

到目前为止，只有 GET 方法有效。PUT、POST、DELETE 都不起作用。

下面是我在客户端的代码。

        fetch('https://mywebapi.net/api/event/', {
            method: 'POST',
            headers: {
                'Accept': 'application/json, text/plain',
                'Content-Type': 'application/json;charset=UTF-8'
            },
            mode: 'no-cors',
            body: JSON.stringify({
                eventId: 5,
                eventName: "Event 5",
                eventDescription: "Event 5 Description",
                eventLocation: "Kuala Lumpur, Malaysia",
                eventDateTime: "2019-03-28"
            }),
        }).then(response => response.text())
            .then(data …

我正在使用 fetch 使用 API，但收到 CORS 错误。我尝试了多个标题，但我不明白问题是什么。

我不是 API 的所有者，所以我无法更改它，但会检查它返回的响应access-control-allow-origin。

以下是我的请求方法：

export const execPOST = (url, body) => {
  return fetch(url, {
    method: "POST",
    headers: {
      "Access-Control-Allow-Origin": "*",
      "Content-Type": "application/json"
    },
    body: JSON.stringify(body)
  });
};

响应是：

Request URL: http://api
Request Method: OPTIONS
Status Code: 405 Method Not Allowed
Remote Address: ip
Referrer Policy: no-referrer-when-downgrade
Response Headers:
Access-Control-Allow-Origin: *

上面的回复还不足以满足我的请求吗？

控制台错误：

选项net::ERR_ABORTED 405（不允许方法）从源http://api获取的访问已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：它没有 HTTP 正常状态。'http://api''http://localhost:3000'

我使用它来工作（同时开发）"https://cors-anywhere.herokuapp.com/"，但我不认为我应该将它用于生产环境。

我找到了很多关于这个问题的材料，但是除了实现后端来发出请求或使用其他东西作为代理来发出请求等等之外，没有任何其他有效的方法......

您可能知道，RFC 6265表明允许有多个带有该Set-Cookie名称的标头。

然而，提取API不允许这样做，因为所有的暴露的方法头接口（包括get()，set()，append()，entries()和所有其余的）已实施的所有具有相同名称的头的值合并成一个头分离用逗号。

例如，如果我们这样做：

var headers = new Headers();
headers.append('content-type', 'text/plain');
headers.append('set-cookie', 'test1=v; Max-Age=0');
headers.append('set-cookie', 'test2=v; Max-Age=0');
headers.append('set-cookie', 'test3=v; Max-Age=0');

然后我们尝试使用 读取set-cookie值get('set-cookie')，或者通过headers使用迭代变量entries()，我们得到：

'set-cookie' : test1=v; Max-Age=0, test2=v; Max-Age=0, test3=v; Max-Age=0

请注意，如果我们尝试读取或操作具有多个同名标头的现有响应对象（即由可以说支持此类允许行为的其他框架创建），也会发生相同的错误行为：换句话说，似乎Fetch API是完全无法妥善处理这种情况。

现在，虽然这种行为所需的一些报头，如Accept，该Set-Cookie标题不正确地被大多数浏览器（包括铬和Firefox）解析，从而导致不正确设置的cookie。

这是一个已知的错误吗？如果是这种情况，是否有可用的解决方法来克服这个问题？

情况是这样的：我有证书、密钥、公钥和私钥。我正在构建一个与另一个系统集成的应用程序。我的系统是在 Azure 上运行的 Next.js 应用程序。它向在其他地方运行的外部服务器发出 API 请求。 我知道我的证书/密钥很好，因为当我使用 Insomnia API 客户端时请求有效（200 响应和数据返回）。

然而，尝试在 Node 中执行此操作时，我不断收到 400 错误。我尝试过使用核心fetch和https功能并使用该node-fetch包来做到这一点。我还查看了该request软件包（因为互联网上有这样的示例），但该软件包一年多前已被弃用，因此我认为不应使用它。

这是我尝试使用的一些代码的示例。我将证书/密钥存储/tmp/certs在我的本地系统上并且它们正在加载（我一直在大量记录）。我使用过各种不同的方法requestOptions，但似乎没有任何效果。

import fs from 'fs'
import fetch from 'node-fetch'

const requestOptions = {
    method: 'GET',
    port: 443,
    cert: fs.readFileSync("/tmp/certs/ct.crt", 'utf-8'),
    key: fs.readFileSync("/tmp/certs/ct.key", 'utf-8')
  };

const res = await fetch("https://url.com?unique_ID=1234&key=abcd", requestOptions);

检查res总是会出现 400。此时我已经尝试了多种不同的方法。这看起来应该是一个微不足道的常见用例......我做错了什么以及我应该如何构建这个请求？

帮助我，Stack Overflow，你是我唯一的希望！

我正在使用 SWR 获取数据来填充表。我正在使用以下代码：

const { data: items, error } = useSWR(fetchAllItems.name, fetchAllItems)

fetcher 函数看起来像这样

async function fetchAllItems() {
  const response = await fetch('http://localhost:3000/items')
  const data = await response.json()
  return data
}

该表还具有添加新项目的选项。创建新项目后，我调用 mutate 让 SWR 获取新数据。在开发模式下运行它时，一切都很好，但是当使用 next start 而不是 next dev 时，它不会获取数据。在网络选项卡中，它显示 0 个请求，因此看起来 fetcher 函数从未被调用。

获取数据的服务器运行正常。我已经使用邮递员对此进行了测试，它返回了所有项目。也可以从下一个应用程序访问它，因为创建新项目效果很好。

编辑：经过更多调试后，我将范围缩小到这样一个事实：当使用 next start 而不是 next dev 时，SWR 永远不会验证。

编辑2：可以在此处找到具有最小可重现示例的codesandbox https://codesandbox.io/s/elated-cherry-3ugqyi?file=/package.json。De Codesandbox 使用（调用下一个开发）运行程序npm run dev，因此一切正常。但是，当使用npm run build && npm run startuseSWR 运行它时，不再调用 fetcher 函数。

编辑3：我已经解决了这个问题，但不明白如何解决。我将 fetcher 函数更改为以下内容：

function fetchAllItems() …

早些时候，我能够将另一个 api 调用的响应通过管道传输到 Next.js api 响应，如下所示

export default async function (req, res) {
    // prevent same site/ obfuscate original API
    // some logic here 
    fetch(req.body.url).then(r => {
      r.body.pipe(res);
    }).catch(err => {
      console.log(err);
      res.status(500).send("Invalid Url");
    })
}

效果很好。但现在response.bodyfrom fetch API 没有pipe方法了。相反，它有pipeTo方法pipeThrough。并且 Next.jsres:NextApiResponse不可分配给WritableStream.

我还尝试创建blob( await r.blob()) 并使用res.send(blob)和res.send(blob.strem())。一开始似乎可以工作，但前端接收到的数据不正确（基本上fetch().then((res) => res.blob()).then((blob) => URL.createObjectURL(blob)))会给出损坏的结果）。