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

【问题标题】：How to fix CORS error in react + vite from front end?如何从前端修复 react + vite 中的 CORS 错误？
【发布时间】：2022-11-13 16:20:54
【问题描述】：

所以我试图从 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 中使用代理，但在 cmets 中他们说 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()]
})

` 我在这里想念什么？任何帮助，将不胜感激。

【问题讨论】：

我认为您需要一个 API 密钥来访问 API，不是吗？ opendata.aemet.es/centrodedescargas/altaUsuario?

标签： javascript reactjs cors fetch-api vite

【解决方案1】：

由于您无权访问服务器，因此您无法从客户端执行任何操作，唯一的方法是代理请求，heroku 不是您可以使用的唯一平台，您可以自己创建一个，或使用这项服务

https://corsproxy.github.io/

【讨论】：