为什么在获取 AEMET API 时出现 CORS 错误，我该怎么办？ [复制]

Question

所以我试图从 Reactjs 中的 API 请求数据，但我收到了 CORS 错误：

此 API 需要我请求和使用的密钥。当您这样做时，API 的网页会返回要获取的 URL 和一个 CURL 脚本。

要获取的网址：https://opendata.aemet.es/opendata/api/red/especial/contaminacionfondo/estacion/07

Curl（出于隐私目的，我更改了 API 密钥）：

curl -X GET \
  --header 'Accept: application/json' \
  --header 'api_key: eyJhbGcadsfasdfasd345zI1NiJ9.eyJzdWIi34SSFJpc2FiaW9tb3JhbGVzQGdtYWlsLmNvbSIsImp0aSI6IjZhODFhODk1LTM4ZDMtNGU1Ni04YzhjLWJjMmJlOGYxNDU4YyIsImlzcyI5678SFGHdgaWF0IjoxNjY4MTg3NTM5LCJ1c2VySWQiOiI2YTgxYTg5NS0zOGQzLTRlNTYtOGM4Yy1iYzJiZThmMTQ1OGMiLCJyb2xlIjoiIn0.y4MPUZf7wrdS5ty6epSXSSMjc9Uk2UCNlMOh2ELy110' \
  'https://opendata.aemet.es/opendata/api/red/especial/contaminacionfondo/estacion/07'

我不能在 React 中使用这个 curl 脚本，但我使用了一个工具 (https://kigiri.github.io/fetch/) 将 curl 代码转换为 Reactjs 获取函数。我得到的是：

fetch(
  "https://opendata.aemet.es/opendata/api/red/especial/contaminacionfondo/estacion/07",
  {
    headers: {
      Accept: "application/json",
      Api_key:
        "eyJhbGcadsfasdfasd345zI1NiJ9.eyJzdWIi34SSFJpc2FiaW9tb3JhbGVzQGdtYWlsLmNvbSIsImp0aSI6IjZhODFhODk1LTM4ZDMtNGU1Ni04YzhjLWJjMmJlOGYxNDU4YyIsImlzcyI5678SFGHdgaWF0IjoxNjY4MTg3NTM5LCJ1c2VySWQiOiI2YTgxYTg5NS0zOGQzLTRlNTYtOGM4Yy1iYzJiZThmMTQ1OGMiLCJyb2xlIjoiIn0.y4MPUZf7wrdS5ty6epSXSSMjc9Uk2UCNlMOh2ELy110",
    },
  }
);

我修改了这段代码以在我的 reactjs 应用程序中使用它。所以这就是我尝试过的：

const obtenerDatos = async (url) => {
  const datan = await fetch(url, {
    method: "GET",
    headers: {
      Accept: "application/json",
      api_key:
        "eyJhbGcadsfasdfasd345zI1NiJ9.eyJzdWIi34SSFJpc2FiaW9tb3JhbGVzQGdtYWlsLmNvbSIsImp0aSI6IjZhODFhODk1LTM4ZDMtNGU1Ni04YzhjLWJjMmJlOGYxNDU4YyIsImlzcyI5678SFGHdgaWF0IjoxNjY4MTg3NTM5LCJ1c2VySWQiOiI2YTgxYTg5NS0zOGQzLTRlNTYtOGM4Yy1iYzJiZThmMTQ1OGMiLCJyb2xlIjoiIn0.y4MPUZf7wrdS5ty6epSXSSMjc9Uk2UCN0lMOh2ELy110",
    },
  });
  console.log(datan);
};
useEffect(() => {
  obtenerDatos(
    "https://opendata.aemet.es/opendata/api/red/especial/contaminacionfondo/estacion/07"
  );
}, []);

但是我遇到了不祥的 CORS 错误。 我也试过：

• 不写method:"GET"参数
• 添加新标头"Allow-cross-origin":"*"

有谁知道我在这里错过了什么？我以为 curl 的代码信息就是我所需要的。非常感谢！

Answer 1

我建议您尝试使用 Axios 库。它有办法处理 CORS