Geek Answers Handbook

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

I am running the Spring API server and the Angular-cli server to serve my static content. We will use CDN in production, but both front and servers work on different ports on my local field for development. The Spring server maintains the html start page, and then the rest of the JS, CSS, and html come from Angular-cli / CDN.

The problem is that when calling System.import (), the browser complains about CORS: XMLHttpRequest cannot load http: // localhost: 4200 / system-config.js . The requested resource does not have an Access-Control-Allow-Origin header. Origin ' http: // localhost: 8080 ' is therefore not allowed. zone.js: 323 Error: error: Error loading XHR http: // localhost: 4200 / system-config.js (...)

How to configure Angular-cli to set the header "Access-Control-Allow-Origin" so that the browser does not stagger.

+6
source share
6 answers

I really solved this problem by adding ember-cli-cors . All you have to do is install it using the ng command: ng install ember-cli-cors

0
source

The configuration for CORS support is done on the server, you will need to update your Spring API to allow requests from the CLI application hosted on port 4200 by default.

+1
source

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

0
source

In a very similar setup, it turned out that Chrome-based browsers do not support CORS for localhost addresses. See fooobar.com/questions/83966 / ...

0
source

I spent about 20 hours trying to solve this problem and reading numerous posts. The quick answer is to change the processing of the CORS server and avoid perches. The following code works on tom ee (possibly others), but not on glass fish.

@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"); } }

Changing the code line by line, I found that adding a call to "Access-Control-Allow-Headers" throws an exception in the glass shawl, which leads to an internal server error (500). Apparently, the exception has existed for more than a year and does not show any signs of correction.

I could never get the proxy-config solution to work. I saw debugger messages about the impact

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

It seems that any trailing path or query parameters are truncated by a proxy filter.

Hope this saves someone a ton of time.

0
source

FWIW,

CORS is now included in the angular CLI. Ready, the Access-Control-Allow-Origin header has the value * . Not sure exactly when it was released, but certainly 1.0.0 , and then it is turned on.

As with all CORS issues, your API server must also be configured to receive CORS.

-one
source

More articles:


All Articles