使用头盔时由于 CORS 错误导致 AdminJS 无法工作

Question

src/app.ts

const app = express();

app.use(rTracer.expressMiddleware());
app.use(requestLogger);

app.use(helmet());

app.use(
  cors({
    credentials: true,
    origin: getAllowedOrigins,
  }),
);

src/cors.ts

import { NODE_ENV } from 'common/constants';

export function getAllowedOrigins(
  origin: string | undefined,
  callback: Function,
) {
  let allowedOrigins: string[] = [];
  if (NODE_ENV === 'development') {
    allowedOrigins = [
      'http://localhost:3000',
      'http://localhost:8000',
      'http://localhost:34273',
    ];
  } else if (NODE_ENV === 'test') {
    allowedOrigins = ['http://localhost:3000'];
  } else if (NODE_ENV === 'production') {
    allowedOrigins = ['https://www.somewebsite.com', 'https://somewebsite.com'];
  }
  if (!origin || allowedOrigins.indexOf(origin) !== -1) {
    return callback(null, true);
  } else {
    return callback(new Error(origin + ' not allowed by CORS'));
  }
}

• 我在 AdminJS + CORS + Helmet 组合方面遇到了很多麻烦。我正在尝试很多事情，但似乎都不起作用
• 基本上，除非我删除 CORS 或删除 Helmet，否则管理面板根本不会加载
• 我可以看到登录页面
• 但是一旦我登录，我就收到此 CORS 错误
• 如果需要，请查看 请求 和 响应标头
我怀疑发生这种情况是因为上面 getAllowedOrigins CORS 回调函数中的 origin = null

我尝试了什么

根本不使用头盔中间件，而是使用上面的 CORS

摘下头盔后仍然报错

使用头盔但移除 CORS

• 现在我得到一个空白页面，其中有一些错误
这些错误似乎与
• 内容安全策略有关
做了一些挖掘，发现了一个有同样问题的人
• 似乎是 CSP 错误，让我们尝试一下推荐的解决方案吧？

src/app.ts

const app = express();

app.use(rTracer.expressMiddleware());
app.use(requestLogger);

app.use(
  helmet({
    contentSecurityPolicy: {
      directives: {
        defaultSrc: ["'self'"],
        scriptSrc: ["'self'", "'unsafe-inline'", "'unsafe-eval'"],
        styleSrc: ["'self'", 'https:', "'unsafe-inline'"],
        baseUri: ["'self'"],
        fontSrc: ["'self'", 'https:', 'data:'],
      },
    },
  }),
);

根据该人的解决方案修改了我的 app.ts，让我们再试一次

好的管理面板现在似乎可以工作了
• 但是我无法在没有 CORS 的情况下使用此 Express 服务器，因为我的生产应用程序在单独的域上运行前端
在头盔之后重新添加 CORS

src/app.ts

const app = express();

app.use(rTracer.expressMiddleware());
app.use(requestLogger);

app.use(
  helmet({
    contentSecurityPolicy: {
      directives: {
        defaultSrc: ["'self'"],
        scriptSrc: ["'self'", "'unsafe-inline'", "'unsafe-eval'"],
        styleSrc: ["'self'", 'https:', "'unsafe-inline'"],
        baseUri: ["'self'"],
        fontSrc: ["'self'", 'https:', 'data:'],
      },
    },
  }),
);

app.use(
  cors({
    credentials: true,
    origin: getAllowedOrigins,
  }),
);

天哪，

我们又回到了同样的错误
• 也许和中间件的顺序有关？
• 让我尝试先添加 CORS，然后再添加头盔
在头盔前添加CORS

src/app.ts

const app = express();

app.use(rTracer.expressMiddleware());
app.use(requestLogger);

app.use(
  cors({
    credentials: true,
    origin: getAllowedOrigins,
  }),
);

app.use(
  helmet({
    contentSecurityPolicy: {
      directives: {
        defaultSrc: ["'self'"],
        scriptSrc: ["'self'", "'unsafe-inline'", "'unsafe-eval'"],
        styleSrc: ["'self'", 'https:', "'unsafe-inline'"],
        baseUri: ["'self'"],
        fontSrc: ["'self'", 'https:', 'data:'],
      },
    },
  }),
);

天哪，我们又

又回到同样的错误了
• 我无法删除 CORS，因为我的生产后端和前端在不同的域上运行，但如何使此管理面板与 CORS 一起使用？
编辑1

const app = express();

app.use(rTracer.expressMiddleware());
app.use(requestLogger);

app.use(
  cors({
    credentials: true,
    origin: getAllowedOrigins,
  }),
);

app.use(
  helmet({
    contentSecurityPolicy: false,
    crossOriginEmbedderPolicy: false,
    crossOriginOpenerPolicy: false,
    crossOriginResourcePolicy: false,
    originAgentCluster: false,
    referrerPolicy: false,
    strictTransportSecurity: false,
    xContentTypeOptions: false,
    xDnsPrefetchControl: false,
    xDownloadOptions: false,
    xFrameOptions: false,
    xPermittedCrossDomainPolicies: false,
    xXssProtection: false,
  }),
);

我禁用了所有选项并且它可以工作，所以显然头盔中有一些设置会干扰 adminJS。正在研究中

Answer 1

这可行，但我不知道为什么