4

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!

2
  • Are there more details with the error message? Commented Nov 28, 2016 at 7:17
  • 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... Commented Nov 28, 2016 at 7:18

1 Answer 1

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.

Sign up to request clarification or add additional context in comments.

12 Comments

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?
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.
yes, this is a browser plugin... Mh, i really don´t know what to do to get it working :/
Do you control the server?
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.
|

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.