Angular 2 Basic Authenticatin CORS

Question

I´m trying to do a simple HTTP-Api-Call with Angular to a "normal" Api with Basic HTTP Authentication. My problem now is, that the browser says: "Quellübergreifende (Cross-Origin) Anfrage blockiert: Die Gleiche-Quelle-Regel verbietet das Lesen der externen Ressource auf "...". (Grund: CORS-Kopfzeile 'Access-Control-Allow-Origin' fehlt)."

If i make the request from the Mozilla "RESTClient", everything is ok. This is the response header from the server, if i make the request from RESTClient:

Status Code: 200 OK
Age: 0
Cache-Control: proxy-revalidate, proxy-revalidate
Connection: Keep-Alive
Content-Length: 698
Content-Type: text/xml; charset=UTF-8
Date: Mon, 28 Nov 2016 06:52:57 GMT
access-control-allow-credentials: true
access-control-allow-origin: *

So, as you can see, the 'access-control-allow-origin:'-Header is set...

This is my angular2-method:

// hole die Header für die Api-Aufrufe
    getHeaders() {
        let username = this.variables.getUsername();
        let password = this.variables.getPassword();
        let headers =  new Headers();
        //headers.append("Content-Type", "text/xml");
        headers.append("Access-Control-Allow-Origin", "*");
        headers.append("Access-Control-Allow-Credentials", "true"); 
        headers.append("Authorization", "Basic " + btoa(username + ":" + password));
        headers.append("Access-Control-Allow-Methods", "GET, HEAD, OPTIONS, POST, PUT, DELETE");
        headers.append("Content-Type", "application/x-www-form-urlencoded");
        let options = new RequestOptions({headers: headers});
        console.log(JSON.stringify(options));
        return options;
    }

    // Api-Calls    
    getStatus() {
        return this.http.get(this.variables.getUrl() + 'status2.html', this.getHeaders())
        //return this.http.get(this.localURL + 'status.json')
            .map((res: Response) => res.json())
            .catch(this.handleError);
    }

Here is the response-Header of the Server for the Angular2 request:

OPTIONS /api/status2.html HTTP/1.1
Host: ...
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:45.0) Gecko/20100101 Firefox/45.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: de,en-US;q=0.7,en;q=0.3
Accept-Encoding: gzip, deflate
Access-Control-Request-Method: GET
Access-Control-Request-Headers: authorization
Origin: http://localhost:3000
Connection: keep-alive

Can someone guide me in the right direction or give me an correct answer? I searched stackoverflow and the web, but didn´t find a solution...

Thanks so much!

This is the whole error in Firefox (german): Quellübergreifende (Cross-Origin) Anfrage blockiert: Die Gleiche-Quelle-Regel verbietet das Lesen der externen Ressource auf '...'. (Grund: CORS-Kopfzeile 'Access-Control-Allow-Origin' fehlt). So Firefox didn´t allow the request i think... But I didn´t understand why... — Junias, Nov 28 '16 at 07:18

score 3 · Answer 1 · answered Nov 28 '16 at 07:22

3

These headers need to be sent by the server with the response. Sending them from the client with the request is meaningless.

    headers.append("Access-Control-Allow-Origin", "*");
    headers.append("Access-Control-Allow-Credentials", "true");

If you're using withCredentials: true, then * is not enough for Access-Control-Allow-Origin. The server needs to respond with the exact URL (protocol, host, port) the client was requesting.

answered Nov 28 '16 at 07:22

Günter Zöchbauer

490,478
163
1,733
1,404

mh, ok... But what´s the reason that there is no problem in the Firefox RESTClient but in Angular2? I did not have any access to the server... So i think this cannot be the problem... Aso you see in the Response Header from RESTClient, the Access-Control-Allow-Origin", "*" is set by the server... But if I send it via Angular2, this header is NOT set. I updated my question with the response Headers from angular? – Junias Nov 28 '16 at 07:27
Hard to know what's exactly going on on your system, but if Mozilla "RESTClient" is a browser plugin it might not be subject to the same limitation your JS is. – Günter Zöchbauer Nov 28 '16 at 07:29
yes, this is a browser plugin... Mh, i really don´t know what to do to get it working :/ – Junias Nov 28 '16 at 07:30
Do you control the server? – Günter Zöchbauer Nov 28 '16 at 07:30
Perhaps they don't want you to use you the server the way you intent to. What you always can do to work around CORS issues is, to provide a similar API on your own server and forward requests from your server to the server you actually want to access. CORS limitations apply only for browser clients. – Günter Zöchbauer Nov 28 '16 at 07:34
my, maybe i have to ask them.. But i know two other solutions, based on java (android-app), wich uses exactly the same api... So all in all; You don´t know what i can do on client-side to get it working? ;) – Junias Nov 28 '16 at 07:36
Ok, what information do you need? I will try to provide it... ;) – Junias Nov 28 '16 at 07:40
Is it a public server I can access myself as well? – Günter Zöchbauer Nov 28 '16 at 07:42
no, not really... Can i sent you a private message with the url`;) Thank you so much!! – Junias Nov 28 '16 at 07:44
Can you send me a message using Hangout. The link to my G+ profile is in my SO profile – Günter Zöchbauer Nov 28 '16 at 07:45
I think the Firefox RESTClient works because already the initial request goes to the server, therefore it is not a CORS situation at all. Only if you load the page from `http://foo.com` and then the code loaded from this site accesses `http://bar.com` it is a CORS situation. I tried with curl `curl --basic --user guest:guest --verbose -H "Origin: http://example.com" -H "Access-Control-Request-Method: GET" -X OPTIONS http://yourserver.me:8090/api/page.html` and the `Access-Control-Allow-Origin` header wasn't sent – Günter Zöchbauer Nov 28 '16 at 12:36
and also investigating in the browser devtools didn't show any `Access-Control-Allow-Origin` header. See also http://stackoverflow.com/questions/12173990/how-can-you-debug-a-cors-request-with-curl – Günter Zöchbauer Nov 28 '16 at 12:36

Angular 2 Basic Authenticatin CORS

1 Answers1