CORS - Calling rest services on Tomcat from angular

Question

I am trying to call REST services deployed on Tomcat 8 from Angular 4. Since both these are running on separate domains, CORS issue is expected. So, in the tomcat/conf/web.xml, I have added the below filter

<filter>
  <filter-name>CorsFilter</filter-name>
  <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
  <init-param>
    <param-name>cors.allowed.origins</param-name>
    <param-value>*</param-value>
  </init-param>
  <init-param>
    <param-name>cors.allowed.methods</param-name>
    <param-value>GET,POST,HEAD,OPTIONS,PUT</param-value>
  </init-param>
  <init-param>
    <param-name>cors.allowed.headers</param-name>
    <param-value>Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Authorization,Access-Control-Request-Headers</param-value>
  </init-param>
  <init-param>
    <param-name>cors.exposed.headers</param-name>
    <param-value>Access-Control-Allow-Origin,Access-Control-Allow-Credentials</param-value>
  </init-param>
</filter>
<filter-mapping>
  <filter-name>CorsFilter</filter-name>
  <url-pattern>/*</url-pattern>
</filter-mapping>

This is how I am sending the GET request from Angular

var basicOptions:RequestOptionsArgs = {
  url: 'http://server3:7000/myrest/info',
  method: RequestMethod.Get,
  search: null,
  headers: new Headers(
    {'Authorization': 'Basic AG1hZG1pbjpkZW1vLmRlbW8=' },
    ),
  body: null
};

basicOptions.headers.append('Content-Type', 'application/json');

var reqOptions = new RequestOptions(basicOptions);
var req = new Request(reqOptions);
return this.http.request( req );

Since, I am sending the Authorization header, it is also added in the 'cors.allowed.headers' param in Tomcat.

When I call the REST service from Chrome, it always gives me a 'Invalid CORS request' error (Network tab -> Preview). Below is the error in browser console

XMLHttpRequest cannot load http://server3:7000/myrest/info. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access. The response had HTTP status code 403.

Is there something else that I need to do to make it work?

This is not related to Angular. The server needs to be configured to support CORS requests and respond with required headers. — Günter Zöchbauer, Jun 08 '17 at 14:30

score 1 · Accepted Answer · answered Jun 09 '17 at 12:36

Günter Zöchbauer is right. It is not related to Angular. Even with the filter you added, the server is not configure to accept requests from other domains. To configure your server you can check this answer

Notice that you have a preflight request because you send custom http headers (see the picture below).

CORS - Calling rest services on Tomcat from angular

1 Answers1

Linked