How to specify 'Access-Control-Allow-Origin' when running angular-cli serve

Question

I'm running a Spring API server and an Angular-cli server to serve up my static content. In production we will be using a CDN, but for development both the front and backend servers are running on my local box on different ports. The Spring server serves up the initial html page and then the rest of the JS, CSS, and html come from the angular-cli/CDN.

The problem is that when the call to System.import() is made, the browser complains about CORS: XMLHttpRequest cannot load http://localhost:4200/system-config.js. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access. zone.js:323 Error: Error: XHR error loading http://localhost:4200/system-config.js(…)

How do I configure angular-cli to set the 'Access-Control-Allow-Origin' header so the browser won't puke.

Answer 1

FWIW,

CORS has been enabled in angular CLI now. Out-of-the-box, the Access-Control-Allow-Origin header is set to *. Not sure exactly when it was released, but for sure 1.0.0 and later have it enabled.

As with all CORS issues, your API server also need to be configured to accept CORS.

Answer 2

Configuration to support CORS is done within the server, you will need to update your Spring API to allow requests from the CLI app which is hosted on port 4200 by default.