2017-01-25 2 views
1

Ich versuche Bit.ly API arbeiten, aber ich blieb bei CORS Probleme stecken. Ich überprüfte alle möglichen Quellen, aber das Problem bleibt bestehen.Angular2 bit.ly 'Access-Control-Allow-Origin' Header-Ausgabe

Angular2 Code:

getBitLyUrl (fullUrl : string): Observable<string> { 


    let headers = new Headers({'Access-Control-Allow-Origin' : '*', 'Accept' : 'application/json' }); 
    let options = new RequestOptions({ headers: headers }); 


    let res = this._http.get('https://api-ssl.bitly.com/v3/shorten?access_token=a4d0c60f2cfdba6941b9012c76d95a06f8b3765e&longUrl=' 
        + fullUrl + '&format=json', options) 
     .map((response: Response) => response.json()); 

    return res; 
} 

Headers von Chrome Netzwerk:

General: 
Request URL:https://api-ssl.bitly.com/v3/shorten?  access_token=a4d0c60f2cfdba6941b9012c76d95a06f8b3765e&longUrl=http://www.cyberma .net&format=json 
Request Method:OPTIONS 
Status Code:200 OK 
Remote Address:67.199.248.20:443 


Response: 
Allow:GET, POST, OPTIONS 
Connection:keep-alive 
Content-Length:0 
Content-Type:text/plain; charset=utf-8 
Date:Wed, 25 Jan 2017 10:22:31 GMT 
Server:nginx 

Request: 
Accept:*/* 
Accept-Encoding:gzip, deflate, sdch, br 
Accept-Language:en,cs;q=0.8,sk;q=0.6,de;q=0.4 
Access-Control-Request-Headers:access-control-allow-origin, x-xsrf-token 
Access-Control-Request-Method:GET 
Cache-Control:max-age=0 
Connection:keep-alive 
Host:api-ssl.bitly.com 
Origin:http://localhost:3000 
Referer:http://localhost:3000/ 
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36 

ich diesen Fehler:

XMLHttpRequest cannot load https://api-ssl.bitly.com/v3/shorten?access_token=a4d0c60f2cfdba6941b9012c76d95a06f8b3765e&longUrl=http://www.cyberma.net&format=json . Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' http://localhost:3000 ' is therefore not allowed access.

Jede Hilfe wäre sehr geschätzt!

Antwort

0

let headers = new Headers({'Access-Control-Allow-Origin' : '*', 'Accept' : 'application/json' });. Dies ist ein Antwort-Header. CORS ist eingerichtet, um den Backend-Server zu schützen, daher müssen diese Header vom Backend-Server als Antwort gesetzt werden. Wenn Sie den Server nicht steuern, gibt es keine Möglichkeit, von einem Kreuzherkunftsort aus darauf zuzugreifen, es sei denn, sie stimmen Ihrer Domain zu.

Anforderungen werden vom Browser festgelegt, nicht eckig. Lesen Sie mehr darüber here.

The Cross-Origin Resource Sharing standard works by adding new HTTP headers that allow servers to describe the set of origins that are permitted to read that information using a web browser. Additionally, for HTTP request methods that can cause side-effects on user data (in particular; for HTTP methods other than GET, or for POST usage with certain MIME types). The specification mandates that browsers "preflight" the request, soliciting supported methods from the server with an HTTP OPTIONS request header, and then, upon "approval" from the server, sending the actual request with the actual HTTP request method. Servers can also notify clients whether "credentials" (including Cookies and HTTP Authentication data) should be sent with requests.

+0

Raj get-Funktion entfernen, wenn ich ihr Beispiel unter Verwendung von Klar JS versuchen, funktioniert es gut funktionieren. https://dev.bitly.com/cors.html Der Unterschied zwischen ihrem Beispiel und mir ist, die Anfrage von Winkel beginnt mit Option. Während ihr Beispiel GET sendet. –

+0

Ich habe meine Antwort aktualisiert. – raj

+1

Löschen Sie die Zeile "let headers = new Headers ({'Zugriffssteuerung-Zulassen-Ursprung': '*', 'Akzeptieren': 'application/json'});' Zeile und die Anfrage wird funktionieren. Wie die Antwort hier zeigt, ist "Zugriffssteuerung-Zulassen-Ursprung" ein * Antwort * -Header, kein Anforderungsheader. Also schicke es niemals in einer Anfrage. Es in die Anfrage einzubinden bedeutet, dass Ihr Browser eine OPTIONS-Preflight-Anfrage (https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests) anstelle von GET sendet. Und es ist OK, "Accept: application/json" zu senden, aber die Anfrage funktioniert auch ohne sie. – sideshowbarker

0

einfach die Überschriften und Optionen Argumente aus der