Fetch Api 调用外部 Api 会导致 CORS 错误，但在浏览器中工作正常

Question

我正在尝试通过 api 对 Web 服务器进行 fetch 调用。

var requestOptions = {
  method: 'GET',
  redirect: 'follow'
};

fetch(
  "https://api-mainnet.magiceden.dev/v2/collections?offset=0&limit=3",
  requestOptions
)
  .then((response) => response.text())
  .then((result) => console.log(result))
  .catch((error) => console.log("error", error));

这似乎引发了这个错误 在此输入图片描述

Access to fetch at 'https://api-mainnet.magiceden.dev/v2/collections?offset=0&limit=3' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

但是如果我尝试在浏览器中访问，则会出现相同的网址。显示数据。 在此输入图片描述 任何有关如何使 fetch api 调用正常工作的帮助将不胜感激。

Answer 1

您的“请求选项”是什么？我已经尝试过了，效果很好。

fetch("https://api-mainnet.magiceden.dev/v2/collections?offset=0&limit=3" )
            .then((response) => response.text())
            .then((result) => console.log(result))
            .catch((error) => console.log("error", error));

Answer 2

在浏览器中访问 URL 时，您只是打开一个新网页，这里不强制执行 CORS。

但是，当您从前端发出请求时，您基本上是在尝试从强制执行 CORS 的不同来源获取资源。目标资源需要指定 CORS 标头。

查看响应标头，似乎没有

Access-Control-Allow-Origin

标头。

curl -I 'https://api-mainnet.magiceden.dev/v2/collections?offset=0&limit=20'
HTTP/2 200 
date: Mon, 13 Jan 2025 10:26:44 GMT
content-type: application/json; charset=utf-8
content-length: 9316
x-ratelimit-limit: 180
x-ratelimit-remaining: 178
x-ratelimit-reset: 1736764031
vary: Origin
access-control-allow-credentials: true
access-control-expose-headers: x-set-cookie,x-dd-b
cache-control: public, max-age=600, s-maxage=600
cdn-cache-control: public, max-age=600, s-maxage=600
etag: W/"2464-D17v9sZyezyHhefR4rIK+q+PrQE"
x-kong-request-id: acfb2f03fd21310967a3dd4884b11a55
cf-cache-status: DYNAMIC
set-cookie: __cf_bm=7_BmgEaaxJnYkw3OkfjyDRNxlBVTu2zctCODCoA2gkY-1736764004-1.0.1.1-X0haklTecrOluLBOqLebclQGww05iNL818V4dDL5mCVKnA0QlBViFSKI2k_uwearCY46K7IeKMT2j21OX5Nz_A; path=/; expires=Mon, 13-Jan-25 10:56:44 GMT; domain=.magiceden.dev; HttpOnly; Secure; SameSite=None
server: cloudflare
cf-ray: 9014b08d8eb3ea76-CGK
alt-svc: h3=":443"; ma=86400

要使获取工作正常，您需要使用某种后端调用 API，您可以执行以下操作：

使用您自己的后端

您无需获取原始 URL，而是将其替换为后端 URL。在您的后端，您将有一个端点，用于获取原始 API。这将起作用，因为 CORS 仅存在于浏览器中。

Express 中的示例，但您需要适应您的后端框架。

const app = express()

// use if backend and frontend in different origin
const cors = require('cors')
app.use(cors())

app.get('/collections', (req, res) => {
  fetch('https://api-mainnet.magiceden.dev/v2/collections?offset=0&limit=20')
    .then(response => response.json())
    .then(data => res.json(data));
});

使用 CORS 代理

如果您没有后端，您仍然可以使用 CORS 代理来执行此操作。它使用类似的概念通过后端中继请求，并添加 CORS 标头。您可以使用自托管 (cors-anywhere) 或托管 CORS 代理 (Corsfix) 选项。代码如下所示

fetch('https://proxy.corsfix.com/?https://api-mainnet.magiceden.dev/v2/collections?offset=0&limit=20')

这样您就可以使用 fetch 通过前端加载 json，因为存在 CORS 标头。

（我隶属于 Corsfix）