Setting Access-Control-Allow-Origin header in Angular2 development mode

Question

I am making HTTP requests to an external server which of CORS don't make it through.

In production I will set the Access-Control-Allow-Origin header in nginx. Is there a way to also set the header in the "built-in" Angular's development server so that I don't need to run any proxy on my laptop?

Thierry Templier · Accepted Answer · 2016-06-11 18:25:48Z

1

I think that you need to provide a custom configuration to register the cors module as middleware:

'use strict';
var fallback = require('connect-history-api-fallback');
var log = require('connect-logger');
var cors = require('cors');

module.exports = {
  injectChanges: false, // workaround for Angular 2 styleUrls loading
  files: ['./**/*.{html,htm,css,js}'],
  watchOptions: {
    ignored: 'node_modules'
  },
  server: {
    baseDir: './',
    middleware: [
      log({format: '%date %status %method %url'}),
      cors(),
      fallback({
        index: '/index.html',
        htmlAcceptHeaders: ['text/html', 'application/xhtml+xml']
      })
    ]
  }
};

To use the custom configuration file use the c or config parameter:

"lite": "lite-server -c custom-config.js",

Here is the cors module:

https://www.npmjs.com/package/cors

answered Jun 11, 2016 at 18:25

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Radek Skokan Over a year ago

Thanks Thierry! (In the meantime I installed a browser plugin to modify the response headers, also an alternative).

Jérèm Le Blond Over a year ago

When editing the configuration file (in node_modules/lite-server/lib/config-defaults.js), I still have the same error: 'Failed to load resource: Origin localhost:3000 is not allowed by Access-Control-Allow-Origin'. An idea to resolve it?

niaomingjian Over a year ago

@RadekSkokan which browser plugin did you install?

Collectives™ on Stack Overflow

Setting Access-Control-Allow-Origin header in Angular2 development mode

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related