前端 API 调用接收 403 错误状态答案

【问题标题】：Frontend API call receiving 403 error status前端 API 调用接收 403 错误状态
【发布时间】：2021-04-12 21:19:48
【问题描述】：

我正在尝试使用 axios 进行牛津词典 API 调用，但它遇到了 cors 问题。我还添加了代理，但返回 403 错误状态。我也在任何地方使用它。 Heroku，这也不起作用。那么有没有办法让这个 API 没有任何问题呢？下面是API调用的代码。

axios.get("https://od-api.oxforddictionaries.com/api/v2/entries/en-gb/ace?strictMatch=false", {
    headers: {
      "Accept": "application/json",
      "app_id": my_app_id,
      "app_key": my_app_key,
    }
  })
  .then((response) => {
    console.log(response);
  })

【问题讨论】：

您有 API 密钥吗？似乎使用字典 API 不是免费的。 HTTP 代码 403 表示请求的资源被禁止，因此您的程序无权访问。
是的，我在注册后提供了一个有效的应用程序 ID 和应用程序密钥。标题也有相同的
afaik application/json 应该是 content-type 而不是 accept
即使它不起作用，得到Cross-Origin Resource Sharing error: PreflightMissingAllowOriginHeader

标签： node.js reactjs http

【解决方案1】：

您需要一个后端来向您发出此 API 调用，而不是直接在前端 (React) 中进行此 API 调用。此外，这将隐藏您的敏感信息（API 密钥和应用程序 ID），还将消除 CORS 错误。

Node.JS 示例：https://codesandbox.io/s/modest-bassi-xff43?file=/src/index.js

【讨论】：

我已经创建了一个简单的 Node 服务器，你可以试试看：codesandbox.io/s/modest-bassi-xff43?file=/src/index.js