title: How to enable CORS allow-origin header in express server with swagger-ui
body: <p>My API server doesn't change or overwrite the Access-Control-Allow-Origin header.</p>
  
  <p>I have an Angular 2+ application with an Express/Swagger-UI API.</p>
  
  <p>The Access-Control-Allow-Origin header in the API cannot be '*' because I use 'withCredentials' in my requests and it's trigger an error on the browser.</p>
  
  <p>I've used 'cors' for setting the CORS headers. Like this:</p>
  
  <pre><code>'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) =&gt; {
          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
  }));
  </code></pre>
  
  <p>The Access-Control-Allow-Origin should match the array of allowed hosts.</p>
  
  <p>When I call the API from the browser, it first make an OPTIONS request, that look correct, like this:</p>
  
  <pre><code>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
  
  </code></pre>
  
  <p>But then it makes the GET/POST request, and then it has the default headers again:</p>
  
  <pre><code>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
  </code></pre>
  
  <p>I think something (probably swagger-UI) is overwriting my headers configuration, but I can't figure it out.</p>