无法访问Strapi管理面板：本地正常但Replit部署后出现CSP错误

问题根源 #

部署到Replit后，Strapi管理面板仍在请求http://localhost:1337，但Replit的Content Security Policy（CSP）仅允许连接'self'和HTTPS地址，导致请求被拦截。

解决步骤 #

1. 配置Strapi的服务器和管理面板URL #

• 编辑项目根目录下的config/server.js（生产环境可使用config/env/production/server.js），设置url为Replit项目的线上域名：

  module.exports = ({ env }) => ({
    host: env('HOST', '0.0.0.0'),
    port: env.int('PORT', 1337),
    url: env('PUBLIC_URL', 'https://your-replit-project-domain.repl.co'),
  });
  

• 编辑config/admin.js（生产环境对应config/env/production/admin.js），同步设置管理面板的url：

  module.exports = ({ env }) => ({
    auth: {
      secret: env('ADMIN_JWT_SECRET'),
    },
    url: env('PUBLIC_URL', 'https://your-replit-project-domain.repl.co/admin'),
  });
  

2. 设置Replit环境变量 #

在Replit项目的「Secrets」面板中添加PUBLIC_URL变量，值为你的项目完整HTTPS域名（例如https://SelfreliantEdibleDatalog.maaz-gamergamer.repl.co）。

3. 调整CSP策略（按需） #

如果上述配置后仍有CSP报错，修改config/middlewares.js中的strapi::security配置，确保connect-src包含你的Replit域名：

module.exports = [
  // 其他中间件配置
  {
    name: 'strapi::security',
    config: {
      contentSecurityPolicy: {
        useDefaults: true,
        directives: {
          'connect-src': ["'self'", 'https:', 'wss:', env('PUBLIC_URL')],
        },
      },
    },
  },
  // 其他中间件配置
];

原理说明 #

本地运行时，前端与后端共用localhost域名，请求不受CSP限制；部署到Replit后，前端必须连接Replit提供的线上域名，同时需要让CSP策略允许该域名的连接请求，才能正常访问管理面板。

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