Twelve REST API在移动端浏览器无法正常调用问题排查求助

核心问题1：前端请求地址硬编码为本地地址 #

你React代码中写死了请求http://localhost:5000/gme_quote，该地址仅在你本地开发、且同时启动后端Express服务时可正常访问。你将前端部署到Netlify后，任何外部设备（包括移动端、其他用户的桌面设备）访问时，都无法连接到你本地的5000端口服务，你自己的桌面端能正常访问只是因为你本地一直运行着后端服务。

核心问题2：Node后端服务未部署到公网 #

Netlify默认仅托管静态前端资源，你编写的Express后端服务并没有部署到公网，即便修改了前端请求地址，也没有对应服务响应请求。
你可以选择两种方案处理：

• 将Express后端单独部署到支持Node服务的平台，获取公网可访问的服务地址
• 改用Netlify Functions编写服务端接口，无需单独维护后端服务

核心问题3：缺少CORS配置 #

即便你将后端部署到公网，前端部署在Netlify域名、后端在独立域名的场景属于跨域请求，你的现有Express代码没有配置CORS规则，请求会被浏览器拦截。
修复方法：

1. 安装cors依赖

npm install cors

2. 在server/index.js中引入并启用cors

const cors = require('cors');
// 放在其他app.use配置之前
app.use(cors());

其他优化点 #

前端请求地址适配多环境 #

不要写死请求地址，根据运行环境动态匹配：

const baseUrl = process.env.NODE_ENV === 'development' 
  ? 'http://localhost:5000' 
  : '替换为你部署后的后端公网地址';
axios.get(`${baseUrl}/gme_quote`)

后端增加错误响应处理 #

现有代码中如果调用Twelve API失败，不会向前端返回任何响应，会导致前端请求超时，修改如下：

app.get('/gme_quote', (req, res) => {
  axios
    .request(options)
    .then(function (response) {
      const price = response.data.price;
      res.send(price);
    })
    .catch(function (error) {
      console.error(error);
      res.status(500).send('行情接口请求失败');
    });
});

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