如何使用swagger-ui在快速服务器中启用CORS allow-origin标头

Question

我的API服务器不会更改或覆盖Access-Control-Allow-Origin标头。

我有一个带有Express / Swagger-UI API的Angular 2+应用程序。

API中的Access-Control-Allow-Origin标头不能为'*'，因为我在请求中使用'withCredentials'，它会在浏览器上触发错误。

我用'cors'来设置CORS头。像这样：

'use strict';

var configuration = require('./configuration');
var SwaggerExpress = require('swagger-express-mw');
var app = require('express')();
var mongoose = require('mongoose');
var bluebird = require('bluebird');
var bodyParser = require('body-parser');
var jwt = require('jsonwebtoken');
var compression = require('compression');
var cors = require('cors');

app.use(bodyParser.json({ limit: '50mb' }));
app.use(compression());

SwaggerExpress.create(config, function(err, swaggerExpress) {
  if (err) { throw err; }

  swaggerExpress.register(app);
  var port = process.env.PORT || 10010;
  mongoose.Promise = bluebird;
  mongoose.connect(appConfig.dbConection());
  mongoose.connection.on('error', console.error.bind(console, 'connection error: '));
  mongoose.set('debug', true);
  mongoose.connection.once('open', function() {
    app.listen(port);
  })
});
const swaggerUi = require('swagger-ui-express');
const YAML = require('yamljs');
const swaggerDocument = YAML.load('./api/swagger/swagger.yaml');

app.use('/api-docs', swaggerUi.serve, swaggerUi.setup(swaggerDocument));
var allowedOrigins = ['http://localhost:4200', 'http://127.0.0.1:10010'];
app.use(cors({
    origin: (origin, callback) => {
        if (!origin) return callback(null, true);
        if (allowedOrigins.indexOf(origin) === -1) {
            return callback(new Error('The CORS policy for this site does not allow the specified Origin'), false);
        }
        return callback(null, true);
    },
    exposedHeaders: ['Origin', 'X-Requested-With', 'Content-Type', 'Accept', 'Authorization', 'api_key', 'x-api-key'],
    credentials: true
}));

Access-Control-Allow-Origin应与允许的主机数组匹配。

当我从浏览器调用API时，它首先发出一个OPTIONS请求，看起来是正确的，如下所示：

Request URL: http://localhost:10010/v1/loginApp
Request Method: OPTIONS
Status Code: 204 No Content
Remote Address: [::1]:10010
Referrer Policy: no-referrer-when-downgrade

Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: x-api-key
Access-Control-Allow-Methods: GET,HEAD,PUT,PATCH,POST,DELETE
Access-Control-Allow-Origin: http://localhost:4200
Access-Control-Expose-Headers: Origin,X-Requested-With,Content-Type,Accept,Authorization,api_key,x-api-key
Connection: keep-alive
Content-Length: 0
Date: Thu, 04 Apr 2019 08:25:53 GMT
Vary: Origin, Access-Control-Request-Headers
X-Powered-By: Express

但它然后发出GET / POST请求，然后再次有默认标头：

Request URL: http://localhost:10010/v1/loginApp
Request Method: GET
Status Code: 200 OK
Remote Address: [::1]:10010
Referrer Policy: no-referrer-when-downgrade

Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: *
Access-Control-Expose-Headers: Origin,X-Requested-With,Content-Type,Accept,Authorization,api_key,x-api-key
Content-Length: 770
Content-Type: application/json; charset=utf-8
Date: Thu, 04 Apr 2019 08:25:53 GMT
ETag: W/"302-BwX5DjK/lUY+ueP6UZ9TgWOTw/s"
Vary: Origin
X-Powered-By: Express

我认为某些东西（可能是swagger-UI）会覆盖我的标题配置，但我无法弄明白。

Answer 1

您需要在Swagger GET / POST处理程序之前注册您的CORS中间件。

OPTIONS请求成功，因为Swagger没有注册OPTIONS处理程序，因此请求到达中间件。

在Swagger处理程序到达CORS中间件之前接受请求之前，GET / POST请求失败。

移动app.use(cors({...所以它在app.use('/api-docs', swaggerUi...之前。

Answer 2

似乎swagger-express-mw内置了CORS支持，请参阅swagger_controllers中的config/default.yaml。我有同样的问题，并通过从那里删除cors修复它。

像你一样，我怀疑它覆盖了Access-Control-Allow-Origin标题，但没有时间正确检查它。