17

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.

wholladay
  • 1,400
  • 1
  • 18
  • 34
  • I was thinking about creating some kind of "proxy" to send the requests back and forth to the API server during development time, but I'm also interested in something less smelly... – Andre Soares Jun 02 '16 at 22:10

6 Answers6

4

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.

Eric Liprandi
  • 5,324
  • 2
  • 49
  • 68
1

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.

Brocco
  • 62,737
  • 12
  • 70
  • 76
1

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

Leukipp
  • 550
  • 2
  • 9
  • 25
1

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.

brtip
  • 47
  • 3
0

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

Mavlarn
  • 3,807
  • 2
  • 37
  • 57
-1

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
jenson-button-event
  • 18,101
  • 11
  • 89
  • 155
wholladay
  • 1,400
  • 1
  • 18
  • 34
  • It looks like all that did was install the npm package in package.json devDependencies for "ember-cli-cors". How does `ng serve` know about it after it is installed? Feels like I have to import it or add it to system-config.ts ? – jmbmage Jun 07 '16 at 16:57
  • 5
    The specified command install is invalid. For available options, see `ng help`. – marcel Dec 13 '16 at 09:10
  • The correct command should probably be `npm install ember-cli-cors`. – hunger Nov 05 '18 at 13:20