Angular 2 - Response for preflight has invalid HTTP status code 401

Question

I know there a already lot of same solved issues here,
but unfortunately none of them helped me :-(.

Here my problem:
I try to connect from my localhost to my REST service on a server. It works fine with a FF REST plugin, but my application results in following errors:

• OPTIONS http://.../my_REST_Service/ 401 (Unauthorized)
• XMLHttpRequest cannot load http://.../my_REST_Service/.
  Response for preflight has invalid HTTP status code 401

How I try to get the data I want:

@Injectable()
export class ModelsComponent implements OnInit {

    private restRoot = 'http://.../my_REST_Service';
    private data;

    constructor(private http: Http) { }

    ngOnInit() {
        this.getModels().subscribe(res => {
            this.data = res; 
            console.log(this.data);
        });
    }

    authHeaders() {
        let username: string = 'xxxx';
        let password: string = 'xxxx';

        let token: string = btoa(username + ":" + password);

        let headers: Headers = new Headers();
        headers.append('Access-Control-Expose-Headers', 'Authorization');
        headers.append('Authorization', 'Basic ' + token);
        headers.append("Access-Control-Allow-Origin", "http://localhost:4200/");
        headers.append("Access-Control-Allow-Methods", "*");
        headers.append("Access-Control-Allow-Headers", "Accept,Accept-Charset,Accept-Encoding,Accept-Language,Authorization,Connection,Content-Type,Cookie,DNT,Host,Keep-Alive,Origin,Referer,User-Agent,X-CSRF-Token,X-Requested-With");
        headers.append("Access-Control-Allow-Credentials", "true");

        return headers;
    }

    getModels(): Observable<any> {
        return this.http.get(this.restRoot, {
                    headers: this.authHeaders(), 
                    withCredentials: true        <- from a similar issue
               }).map(res => res.json());
    }
}

My Server is configured like this:

Header set Access-Control-Allow-Origin "http://localhost:4200"
Header set Access-Control-Allow-Headers "Accept,Accept-Charset,Accept-Encoding,Accept-Language,Authorization,Connection,Content-Type,Cookie,DNT,Host,Keep-Alive,Origin,Referer,User-Agent,X-CSRF-Token,X-Requested-With"
Header set Access-Control-Allow-Methods "*"
Header set Access-Control-Allow-Credentials "true"   
Header set Access-Control-Expose-Headers "Authorization"       <- from a similar issue

I know there are other same/ similar solved issues. But I still do not know what to do or how to do it. I really appreciate it if someone can help me with my code!!

Answer 1

The browser does an OPTIONS request before doing your HttpGet, you need to add an endpoint with the same route as the HttpGet, make that an HttpOptions request, remove auth from that endpoint and return a 200 OK from it and that should fix your issue.