如何使获取API在不启用浏览器中的COR的情况下工作

Question

我一直在尝试将此代码用于各种版本： （URL指向NASA APOD API）

  try {
    const rsp = await fetch(url, {
      method: 'GET',
      mode: 'cors',
      headers: {
        'Content-Type': 'application/json',
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Methods': 'GET',
      },
    })
    if (rsp.ok) {
      console.log(`>>> no problem with call to fetch api:`)
      const data = await rsp.json()
      return data
    }
    console.log(`!!! some other problem occurred with call to fetch api:`, rsp)

  } catch (err) {
    console.log(`!!! problem with call to fetch api:`, err)
  }

我一直在遇到此错误：

当我在Chrome中运行代码时。但是，当我在Firefox中运行相同的代码时，我会从API中返回预期数据。

当我在Chrome中安装扩展名以启用CORS时，我会从API中返回预期的数据。

当我使用fetch头 - 'mode'运行代码时：'no -cors'，我在chrome中得到以下响应：

我能理解的是要点是因为API在不同的域（IE来自NASA）。 Firefox给出了类似的响应。

因此，我已经达到了可以通过在浏览器中打开COR（通过浏览器扩展程序）来制作Chrome代码的地步。这显然并不令人满意。

我将感谢有关解决Chrome中此问题的任何建议，它确实涉及使用浏览器级别的CORS打开。

最新尝试：

这是NextJS API路由。

这是使用AXIOS调用API路由

这是Axios的错误。

看来代理不起作用，Responseurl看起来它来自本地主机而不是目标API地址。

有什么想法吗？

Answer 1

从技术上讲，API不属于您，这是无法将其从您的前端调用到该API的方法，不要试图配置您的前端或浏览器，因为它无济于事。

您可以尝试：

• 检查该API的文档以允许从特定的原始域进行调用。
• 创建自己的代理服务器，然后不要从前端打电话 - ＆gt;那个API，您可以称呼“您的前端 - ＆gt;您的代理 - ＆gt; the api”（原因，您仍然必须配置代理，如果您的前端不在同一域上运行，