Angular 2 - Response for preflight has invalid HTT

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

"My Server is configured like this" — That's mostly irrelevent. Look at the error message: "Response for preflight has invalid HTTP status code 401"

It says nothing about any of the things you mentioned with Access-Control-Allow-Thing.

• The browser is making an OPTIONS request to ask if a cross origin request is allowed.
• The response says "Your username and password is wrong".

Since the browser hasn't received permission to make the cross origin request: It hasn't sent a username and password.

You need to find the code on your server that performs the authorisation and exclude OPTIONS requests from that test. Anybody should be able to make the OPTIONS request, not just people who have the username and password.

Answer 2

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.

Answer 3

On the server side, if using Node.js you can consider authorizing all OPTIONS requests so browsers won't need authentication to check what methods are authorized on the server/REST API.

Consider code like:

if (req.method === 'OPTIONS') {
    res.status(200).end();
} else {
    next();
}