Netlify部署应用在移动设备上无法获取数据库数据求助

问题根源 #

你的核心问题出在请求URL使用了localhost:5000——localhost仅指向当前设备的本地服务，移动设备（哪怕和桌面处于同一网络）无法识别这个地址，自然会返回Connection Refused错误。桌面能正常运行是因为前端和后端服务都在同一台设备上，localhost直接指向你的桌面机器。

解决方案 #

• 替换localhost为后端公网地址
  你的前端部署在Netlify，连接PostgreSQL的后端服务应该也部署在Render或其他公网服务器上，需要把请求URL替换成后端的公网域名。比如如果后端部署在Render，地址会是类似https://your-backend-service.onrender.com/api/items（具体地址查看你Render上的服务配置）。修改后的代码示例：

  // Fetch items from the backend
  useEffect(() => {
    fetch("https://your-backend-public-url/api/items")
      .then((response) => response.json())
      .then((data) => setItems(data))
      .catch((error) => console.error("Error fetching data:", error));
  }, []);
  

• 配置跨域（CORS）支持
  因为前端是HTTPS协议（Netlify默认提供），需要在后端服务中配置CORS，允许https://sdstockdb.netlify.app域名的请求。以Express框架为例，安装cors中间件后添加如下配置：

  const cors = require('cors');
  app.use(cors({
    origin: 'https://sdstockdb.netlify.app'
  }));
  

  这能避免跨域请求被浏览器拦截。

• 验证后端服务状态
  确认Render上的后端服务处于运行状态，手动访问后端公网地址的/api/items路由（比如用浏览器或Postman），确保能正常返回数据。

• 避免混合内容问题
  确保后端使用HTTPS协议，因为前端是HTTPS，浏览器会阻止HTTP的请求（混合内容限制），导致请求失败。

内容的提问来源于stack exchange，提问作者Shafiek Davids