CODEWITHSUNDEEP
angular-cli
wholladay
wholladay

Reputation: 1468

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

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.

Upvotes: 18

Views: 33900

Answers (6)

wholladay
wholladay

Reputation: 1468

I actually solved this issue by using the ember-cli-cors add on. All you have to do is install it using the ng command like so:

npm install ember-cli-cors -D

Upvotes: -1

brtip
brtip

Reputation: 57

I just spent about 20 hours trying to resolve this problem and reading numerous posts. The quick answer is, modify the server CORS handling and avoid glassfish. The following code works on tom ee (possibly others), but not on glassfish. 

@Provider
public class NewCrossOriginResourceSharingFilter implements ContainerResponseFilter {

@Override
public void filter(ContainerRequestContext requestContext, ContainerResponseContext response) {
    response.getHeaders().putSingle("Access-Control-Allow-Origin", "*");
    response.getHeaders().putSingle("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
    response.getHeaders().putSingle("Access-Control-Allow-Headers", "Content-Type");
}
}

By bisecting the code line by line I found that adding the "Access-Control-Allow-Headers" call causes an exception in glassfish resulting in an Internal Server Error (500). Apparently the exception has been there for over a year and shows no sign of being fixed.

I was never able to get the proxy-config solution to work. I would see debugger messages to the effect of

/api/path/users => http:localhost:8080/

It appears that any trailing path or query params are truncated by the proxy filter.

I hope this saves someone a bunch of time.

Upvotes: 1

Leukipp
Leukipp

Reputation: 590

In a very similar setup it turned out that Chrome-based browsers do not support CORS for localhost addresses. See https://stackoverflow.com/a/10892392/661414

Upvotes: 1

Eric Liprandi
Eric Liprandi

Reputation: 5574

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.

Upvotes: 4

Mavlarn
Mavlarn

Reputation: 3883

You can add a proxy config. It will 'proxy' the request to the domain of your server.

Upvotes: 0

Brocco
Brocco

Reputation: 64863

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.

Upvotes: 1

Related Questions