本地React无法获取Heroku部署的Strapi应用数据问题咨询

你遇到的问题按以下步骤排查修复即可：

1. 前端请求地址修正 #

• 本地开发阶段：如果本地Strapi服务启动在1337端口，Apollo Client的uri填http://localhost:1337/graphql是正确的。
• 线上部署阶段：必须替换为Heroku上Strapi应用的线上地址，格式为https://<你的Heroku应用名>.herokuapp.com/graphql，也就是你生产环境server.js里MY_HEROKU_URL对应的地址。注意线上必须用https协议，用http会被Heroku强制跳转导致请求失败。

2. 补全Strapi CORS配置 #

跨域拦截是这类请求报错的最常见原因，你需要给Strapi配置允许的请求来源：
打开项目下config/middlewares.js文件，修改cors配置，把你的前端本地开发地址、线上部署地址都加入白名单：

// config/middlewares.js
module.exports = [
  'strapi::errors',
  {
    name: 'strapi::cors',
    config: {
      origin: ['http://localhost:3000', 'https://你的前端线上域名'],
      methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
      headers: ['Content-Type', 'Authorization'],
    },
  },
  'strapi::security',
  'strapi::poweredBy',
  'strapi::logger',
  'strapi::query',
  'strapi::body',
  'strapi::session',
  'strapi::favicon',
  'strapi::public',
];

3. 检查Heroku环境变量配置 #

你在生产环境server.js里引用了MY_HEROKU_URL环境变量，需要手动在Heroku后台添加：

• 进入Heroku对应应用的Settings页面
• 找到Config Vars板块，点击Reveal Config Vars
• 新增键为MY_HEROKU_URL，值为Strapi应用完整线上地址（比如https://xxx-strapi.herokuapp.com，末尾不要加斜杠）

你贴出来的数据库配置是正确的：根目录默认用sqlite方便本地开发，生产环境自动加载config/env/production/database.js的postgres配置，Heroku会自动注入Postgres的DATABASE_URL环境变量，不需要手动修改这部分代码。

验证方法 #

重新部署Strapi应用后，先直接访问https://<你的Heroku应用名>.herokuapp.com/graphql，如果能正常打开GraphQL playground页面，说明后端服务运行正常，再修改前端请求地址测试即可。

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