Vercel部署的React应用Axios.get返回无效HTML致崩溃

环境与现状 #

• 前端、后端均部署在Vercel，后端API通过Thunder Client测试正常
• 本地开发环境（localhost:3000）下，前端通过package.json配置的"proxy": "https://spoon-fed-server.vercel.app/"可正常请求API
• 部署后，前端使用Axios请求/api/allRestaurants时，返回的是前端HTML内容而非后端接口数据，导致后续调用filteredRestaurants.map时应用崩溃

相关代码 #

前端API请求代码 #

function App() {
   const dispatch = useDispatch();

   useEffect(() => {
      axios
         .get("/api/allRestaurants")
         .then((res) => {
            dispatch(updateRestaurant(res.data));
            console.log("restaurant data fetched succesfully");
            // dispatch(updateFilteredRestaurants(res.data));
         })
         .catch((err) => console.log(err));
      console.log("couldnt fetch the restaurant data");
      eslint-disable-next-line
   }, []);

返回的错误内容 #

filteredRestaurants:  "<!doctype html><html lang="en"><head><link rel="preconnect" href="https://fonts.googleapis.com"/><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/><link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,800&display=swap" rel="stylesheet"/><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>Spoon Fed</title><script defer="defer" src="/static/js/main.d86bc55d.js"></script><link href="/static/css/main.b4b38051.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>"

导致崩溃的过滤代码 #

export const SearchHeader = () => {

  const city = useSelector(store => store.searchInputs.city);
  const searchValue = useSelector(store => store.searchInputs.search);

  const restaurant = useSelector((store) => store.restaurants);

  const filter = (city, search ) => {
    let filteredRes = restaurant;
    if(filteredRes.length > 0){
      if(city){
        filteredRes = filteredRes?.filter(restaurant => restaurant.city_name.toLowerCase() === city.toLowerCase());
      }
      if(search){
        filteredRes = filteredRes?.filter(restaurant => restaurant.name.toLowerCase().includes(search.toLowerCase()))
      }
    }
    return filteredRes;
  }
  const filteredRestaurants = filter(city,searchValue);
  console.log('filteredRestaurants: ', filteredRestaurants);

解决办法 #

1. 移除package.json中的proxy配置：该配置仅在本地开发环境生效，Vercel部署后不支持此规则。
2. 使用完整后端API地址发起请求：修改Axios请求路径为完整的后端URL：

axios.get("https://spoon-fed-server.vercel.app/api/allRestaurants")

3. 配置环境变量（推荐）：在Vercel前端项目中添加环境变量（如REACT_APP_API_BASE_URL），代码中通过变量拼接路径，避免硬编码：

axios.get(`${process.env.REACT_APP_API_BASE_URL}/api/allRestaurants`)

4. 处理跨域问题：若后端未配置CORS，需在后端添加CORS中间件（如Express的cors包），允许前端部署域名的请求。
5. 添加兜底逻辑避免崩溃：在过滤函数中先判断数据是否为有效数组，防止非数组类型调用map：

const filter = (city, search ) => {
  let filteredRes = restaurant;
  if(!Array.isArray(filteredRes)){
    return [];
  }
  if(filteredRes.length > 0){
    if(city){
      filteredRes = filteredRes.filter(restaurant => restaurant.city_name.toLowerCase() === city.toLowerCase());
    }
    if(search){
      filteredRes = filteredRes.filter(restaurant => restaurant.name.toLowerCase().includes(search.toLowerCase()))
    }
  }
  return filteredRes;
}

内容的提问来源于stack exchange，提问作者Mayank Jain