如何修复前端react + vite中的CORS错误？

Question

所以我尝试从 API 获取数据，但无论我尝试什么，它都会显示 CORS 错误...

重要的是要知道它是一个外部 API，我无权访问服务器代码。仅限我的前端代码。

我的代码如下：

`

const [contaminacion, setcontaminacion] = useState([]);

 
  const obtenerDatos = async (url) => {
    const datan = await fetch(url, {
      mode: "cors",
      method:"GET",
      headers: {
        "Access-Control-Allow-Origin": "*",
        "cache-control": "no-cache",
      },
    });
    console.log(datan);
    const dataParsed = await datan.json();
    setcontaminacion(dataParsed.results);
  };

  
  useEffect(() => {
    obtenerDatos(
      "https://opendata.aemet.es/opendata/api/red/especial/contaminacionfondo/estacion/07"
    );
    
  }, []);

` 我在一篇旧帖子（超过 5 年）中读到，我可以使用 Heroku 代理，但在评论中他们说 Heroku 不再用于此目的。

我尝试在我的 vite.config.js 文件夹中设置代理，但它对我不起作用，我不知道我做得是否正确。

这就是我写的： `

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  server:{
    proxy:{
      '/api': {
        target: 'https://opendata.aemet.es/opendata/api/red/especial/contaminacionfondo/estacion/07',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
      
    }

  },
  plugins: [react()]
})

` 我在这里缺少什么？任何帮助将不胜感激。

Answer 1

如果没有 API 密钥，您将无法使用 https://opendata.aemet.es/centrodedescargas/inicio API。

您必须在网站上注册，获取 API 密钥并使用该 API 发出请求。注册 API 密钥时，系统会要求您提供应用程序的域名。该域名将在

Access-Control-Allow-Origin

标头中返回，您的客户端将不再收到 CORS 错误。

Answer 2

不知道为什么，但它有效

const axiosInstance = axios.create({
  baseURL: "http://localhost:8000",
  headers: {
    "Access-Control-Allow-Origin": "*",
    "Content-Type": "application/json", //this line solved cors
  },
});