AWS Elastic Beanstalk部署Express应用Swagger文档CORS报错问题

• 部署在AWS Elastic Beanstalk上的Node.js Express应用，所有业务API均可正常访问，访问Swagger API文档路径时触发CORS跨域错误，页面持续加载最终空白无内容
• 已通过cors npm包配置全局跨域处理规则，但未解决Swagger文档的跨域问题
• 报错截图：
  
• 现有服务端代码如下：

import router from '@api';
import * as statusCodes from '@constants/statusCode';
import { dbConnect } from '@dbConfig';
import swaggerDocument from '@swaggerDocs';
import { errors } from 'celebrate';
import compression from 'compression';
import cors from 'cors';
import dotenv from 'dotenv';
import express from 'express';
import helmet from 'helmet';
import createError from 'http-errors';
import logger from 'morgan';
import swaggerUi from 'swagger-ui-express';

dotenv.config();
dbConnect();

const app = express();
app.use(cors());
app.use(helmet());
app.use(compression());
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

app.use('/api/v1', router);
app.use('/api-docs', swaggerUi.serve, swaggerUi.setup(swaggerDocument));

// catch 404 errors
app.use((_, _1, next) => {
    next(createError(statusCodes.HTTP_NOT_FOUND));
});

app.use((err, req, res, next) => {
    res.locals.message = err.message;
    res.locals.error = req.app.get('env') === 'development' ? err : {};
    res.status(err.status || statusCodes.HTTP_SERVER_ERROR);
    const response = { message: err.message, error: err.status };
    res.send(response);
    next();
});

app.use(errors());

export default app;

该问题和cors包本身的配置无关，核心是3个配置错误导致的：

1. helmet默认安全策略拦截资源：helmet默认开启的内容安全策略（CSP）会阻止Swagger UI加载内置JS、CSS、OpenAPI规范文件的请求，返回的异常响应不会携带CORS头，前端侧就会表现为跨域错误。
2. 中间件顺序错误：celebrate的错误捕获中间件errors()放在了自定义错误处理中间件之后，校验抛出的错误无法被正常捕获处理，异常响应会绕过CORS头设置逻辑。
3. 代理层拦截：AWS Elastic Beanstalk默认的Nginx反向代理层，会对静态资源路径的响应头做覆盖，可能直接剥离应用返回的CORS头。

1. 调整中间件顺序，修改helmet配置放行Swagger资源 #

替换服务初始化部分的代码，重点调整helmet的CSP规则、错误中间件顺序，给Swagger路由单独绑定CORS规则兜底：

import router from '@api';
import * as statusCodes from '@constants/statusCode';
import { dbConnect } from '@dbConfig';
import swaggerDocument from '@swaggerDocs';
import { errors } from 'celebrate';
import compression from 'compression';
import cors from 'cors';
import dotenv from 'dotenv';
import express from 'express';
import helmet from 'helmet';
import createError from 'http-errors';
import logger from 'morgan';
import swaggerUi from 'swagger-ui-express';

dotenv.config();
dbConnect();

const app = express();

// 基础中间件注册，注意顺序
app.use(cors());
// 配置helmet放行Swagger UI需要的资源权限
app.use(
  helmet({
    contentSecurityPolicy: {
      directives: {
        defaultSrc: ["'self'"],
        scriptSrc: ["'self'", "'unsafe-inline'", "'unsafe-eval'"],
        styleSrc: ["'self'", "'unsafe-inline'"],
        imgSrc: ["'self'", "data:"],
      },
    },
  })
);
app.use(compression());
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

app.use('/api/v1', router);
// 给Swagger路由单独绑定CORS中间件兜底，避免被其他规则拦截
app.use('/api-docs', cors(), swaggerUi.serve, swaggerUi.setup(swaggerDocument));

// 404捕获
app.use((_, _1, next) => {
    next(createError(statusCodes.HTTP_NOT_FOUND));
});

// celebrate错误中间件必须放在自定义错误处理之前
app.use(errors());

// 自定义错误处理
app.use((err, req, res, next) => {
    res.locals.message = err.message;
    res.locals.error = req.app.get('env') === 'development' ? err : {};
    res.status(err.status || statusCodes.HTTP_SERVER_ERROR);
    const response = { message: err.message, error: err.status };
    res.send(response);
});

export default app;

2. 验证应用层配置 #

部署修改后的代码后，先直接访问Swagger对应的OpenAPI规范地址（可通过浏览器开发者工具的网络面板找到该请求路径，通常为你的域名/api-docs/json），检查响应头中是否存在Access-Control-Allow-Origin字段：

• 如果存在该字段，刷新/api-docs页面即可正常加载
• 如果不存在该字段，说明是EB的Nginx代理层拦截了响应头，需要补充Nginx配置。

3. EB层Nginx配置兜底（应用层修改无效时使用） #

在项目根目录的.ebextensions文件夹下新建nginx.config文件，添加如下配置让Nginx透传CORS头：

files:
  "/etc/nginx/conf.d/cors.conf":
    mode: "000644"
    owner: root
    group: root
    content: |
      location /api-docs {
        add_header Access-Control-Allow-Origin * always;
        add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS' always;
        proxy_pass http://localhost:8081;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
      }

配置完成后重新部署应用即可生效。

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