3

I am new to Angular and Docker. I am trying to deploy angular 6 app on Nginx in docker container. My angular app will call web-services with Authorization token. It works fine on my development env with --proxy-config but it does not work in docker container. I tried intercepting the HTTP request and update the URL of web service, but it is not send Authorization headers. How should I call web-services with custom headers?

environment.ts

export const environment = {
production: false,
calculateServiceAPIURL: 'http://localhost:8762'
};


import { Injectable } from '@angular/core';
import {
    HttpRequest,
    HttpHandler,
    HttpEvent,
    HttpInterceptor
} from '@angular/common/http';
import { Observable } from 'rxjs';
import { environment } from './../environments/environment';

@Injectable({
    providedIn: 'root'
})

export class TokeninceptorService implements HttpInterceptor {

constructor() { }

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    console.log(req.headers);
    req = req.clone({
        url: environment.calculateServiceAPIURL + req.url,
        setHeaders: {
            'Content-Type': 'application/json',
            Authorization: 'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJtYWxhdi5wYXJpa2hAeWFob28uY29tIiwidXNlciI6IntcImlkXCI6MSxcImVtYWlsXCI6XCJtYWxhdi5wYXJpa2hAeWFob28uY29tXCIs'
        }
    });
    return next.handle(req);
}

}

Error Message: Access to XMLHttpRequest at 'http://localhost:8762/binaryTree/calculateSum' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

enter image description here

Request and Response headers

enter image description here

Server is not receiving Authorization header due to which it is responding with 401 Unauthorized response status.

6
  • The proxy configuration is intended to proxy calls when running the dev server via ng serve. After you run ng build you are responsible for the web server and its configurations Commented May 13, 2019 at 6:06
  • angular.io/guide/… Commented May 13, 2019 at 6:07
  • 1
    enable-cors.org/server_nginx.html Commented May 13, 2019 at 6:08
  • @Vikas, thanks let me try this out Commented May 13, 2019 at 6:10
  • @Vikas, Not much luck. Still getting 'null' for Authorization header response. Commented May 13, 2019 at 6:38

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.