如何搭建Express代理对接React以解决CORS跨域请求头错误

• 服务端代码存在语法错误+逻辑缺失：你写的await没有放在async修饰的函数内，路由回调没有接收请求、响应参数，也没有将第三方接口返回的数据传递给前端
• 前端请求地址错误：仍然直接调用第三方接口，没有走本地代理服务

修正后的完整代码 #

1. server.js代码 #

const express = require("express")
const app = express()
const cors = require("cors")
const axios = require("axios")

app.use(cors())

// 新增async修饰，同时接收req、res参数
app.get("/", async (req, res) => {
  try {
    // 此处请把占位符替换为你自己的实际apikey
    const apiResponse = await axios.get("https://superheroapi.com/api/替换为你的apikey")
    // 将第三方接口返回的结果传递给前端
    res.json(apiResponse.data)
  } catch (err) {
    console.error("请求第三方接口失败：", err)
    res.status(500).json({error: "接口请求失败"})
  }
})

app.listen(3001, ()=>{
  console.log("express代理服务已启动，端口3001");
})

2. App.js代码 #

import './App.css';
import axios from 'axios';
import { useEffect } from 'react';

function App() {
  // 请求放到useEffect中，避免组件重复渲染时重复触发请求
  useEffect(() => {
    const getAPI =  {
      method: "GET",
      // 改为请求本地代理服务地址
      url: "http://localhost:3001",
    }
    axios.request(getAPI)
    .then((response) => {
        console.log("接口返回数据：", response);
    })
    .catch((error) => {
        console.error("请求错误：", error);
    });
  }, [])

  return (
    <>
    <h1>hello world</h1>
    </>
  );
}

export default App;

启动步骤 #

• 先在服务端代码所在目录安装依赖：npm install express cors axios
• 启动代理服务：node server.js，看到控制台打印启动日志后再启动React项目即可正常调用接口

内容的提问来源于stack exchange，提问作者Amadeo de la Peña