0

There are multiple answers regarding this problem here in SO. And all of them boiled down to configuring CORSFilter in web.xml (either in application or server). And I've tried and still trying to make this work. Here are the details: frontend : Angular 5 app running at localhost:4200 backend : cxf based REST app running on Tomcat 8 at https://localhost:4553 CORS Filter mapping in web.xml:

<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.headers</param-name>
            <param-value>Origin, Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Allow-Origin, Access-Control-Request-Headers, Authorization</param-value>
        </init-param> 
        <init-param>
            <param-name>cors.exposed.headers</param-name>
            <param-value>Access-Control-Allow-Origin,Access-Control-Allow-Credentials, Content-Type, Authorization</param-value>
        </init-param>
    </filter>
    <filter-mapping>
        <filter-name>CorsFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

I am using JWT token based authentication with AuthInterceptor in angular which appends the Bearer token in header if present to every request.

The rest end point for the authentication is : https://localhost:8453/onlinecounselling/service/auth

The interceptor code: 

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

      request = request.clone({
        setHeaders: {
          Authorization: `${this.auth.getAccessToken().flatMap(t => `Bearer ` + t)}`
        }
      });   

    return next.handle(request);
  }

Now when I sending this auth request, first of all, the request is going into pre-flight mode (which I'm not sure why, I've checked the MDN article but didn't find the reason) and sending a OPTIONS request, the request headers relating to that is :

Request Headers
Access-Control-Request-Headers: content-type,no-token

Access-Control-Request-Method: POST Origin: http://localhost:4200 User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36

And the response header is just these:

Cache-Control: private
Content-Length: 0
Content-Type: text/plain
Date: Sat, 08 Sep 2018 16:02:31 GMT
Expires: Thu, 01 Jan 1970 05:30:00 IST

There is no headers related to CORS that I've given in CORSFilter.

I followed this answer, the Tomcat site's CORSFilter article and consulted many others but didn't find any solution yet.

I've tested from Postman, which was working fine though, and I've gathered that Postman doesn't work the same way a browser does when sending a request.

Let me know, if any other details are required. I'm stuck here for last two days.

Imran K
  • 81
  • 1
  • 12

2 Answers2

0

Try to add the "no-token" header to the "cors.allowed.headers" section.

Giorgos Myrianthous
  • 36,235
  • 20
  • 134
  • 156
Samuel Barrado Aguirre
  • 1
0

My solution was to make my requests pass through a proxy.conf.json and set responseType: 'text' or 'text/json' or whatever you need. This let the response finally come to my console.log(). source.

tomerpacific
  • 4,704
  • 13
  • 34
  • 52
Nikos Chrysis
  • 1
  • 1