You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

React Native Expo Web端调用API返回HTML而非数组,移动端正常的问题求助

React Native Expo Web端调用API返回HTML而非数组,移动端正常的问题求助

各位大佬好,我现在碰到一个特别费解的问题:我用React Native + Expo开发项目,后端是Express+MongoDB组合,登录的POST请求完全正常,但在Web端调用获取库存数据的GET接口时,返回的居然是整个HTML DOM,根本不是我预期的数组数据。

我已经用Postman通过ngrok隧道测试过这个接口,返回的是正常的数组对象;而且在Android移动端运行APP时,也能正确拿到数据并渲染,但切换到Web端(按W键在浏览器预览)就直接拉胯,控制台报错inventory.Map is not a function,打印response.data一看居然是HTML代码,我整个人都懵了😅

我实在想不通,明明移动端能正常拿到数据,Web端却不行?我知道Android会把RN代码编译成其他语言,但Web端应该是直接跑JS啊,为啥会有这种诡异的差异?

下面是我的Inventory组件代码:

import { View, Text } from 'react-native'
import { SafeAreaView } from 'react-native-safe-area-context'
import axios from 'axios'
import { useState, useEffect } from 'react'
import { DataTable } from 'react-native-paper';

interface InventoryItem {
  _id: string;
  productId: string;
  productName: string;
  amountProduct: number;
  amountProductChecked: number;
}

const Inventory = () => {
  const [inventoryData, setInventoryData] = useState<InventoryItem[]>([]);
  // const API_URL = process.env.EXPO_PUBLIC_BEAPI_URL;

  useEffect(() => {
    axios.get(`https://5030-118-69-72-147.ngrok-free.app/api/inventory`)
      .then(response => {
        console.log('API response:', response.data);
        if (Array.isArray(response.data)) {
          setInventoryData(response.data);
        } else {
          console.error('Error: API did not return an array', response.data);
          setInventoryData([]);
        }
      })
      .catch(error => console.error('Error fetching inventory:', error));
  }, []);

  return (
    <SafeAreaView>
      <View className='flex items-center justify-center h-12 bg-white shadow'>
        <Text className='text-lg uppercase font-semibold'>Kiểm kê</Text>
      </View>
      <DataTable>
        <DataTable.Header>
          <DataTable.Title>Product ID</DataTable.Title>
          <DataTable.Title>Name</DataTable.Title>
          <DataTable.Title>Unit</DataTable.Title>
          <DataTable.Title>Checked</DataTable.Title>
        </DataTable.Header>
        {inventoryData.map((item) => (
          <DataTable.Row key={item._id}>
            <DataTable.Cell>{item.productId}</DataTable.Cell>
            <DataTable.Cell>{item.productName}</DataTable.Cell>
            <DataTable.Cell>{item.amountProduct}</DataTable.Cell>
            <DataTable.Cell>{item.amountProductChecked}</DataTable.Cell>
          </DataTable.Row>
        ))}
      </DataTable>
    </SafeAreaView>
  )
}

export default Inventory

目前我怀疑是不是Web端的CORS问题?或者Expo Web的请求代理配置有问题?又或者后端路由在处理Web请求时返回了错误的内容?有没有大佬遇到过类似的情况,能给点排查思路吗?

内容来源于stack exchange

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.04.08 07:34:52