Angular2 bit.ly 'Access-Control-Allow-Origin' header issue

Question

I am trying get bit.ly API working, but I got stuck at CORS issues. I checked all the sources I could, but the issue remains.

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 from Chrome Network:

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

I get this error:

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.

Any help would be highly appreciated!

raj · Accepted Answer · 2017-01-25 11:21:16Z

0

let headers = new Headers({'Access-Control-Allow-Origin' : '*', 'Accept' : 'application/json' }); . This is a response header. CORS is setup to safe guard the backend server, so these headers have to be set by the backend server in response. If you dont control the server, there is no option to access it from a cross origin unless they approve your domain.

OPTIONS requests are set by browser, not angular. Read more abbout it 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.

edited Jan 25, 2017 at 11:21

answered Jan 25, 2017 at 10:58

raj

6,1247 gold badges33 silver badges67 bronze badges

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

4 Comments

Peter Matisko Over a year ago

Raj, when I try their example using plain JS, it does work well. dev.bitly.com/cors.html The difference between their example and mine is, the request from angular starts with Option. While their example sends GET.

sideshowbarker Over a year ago

Drop the let headers = new Headers({'Access-Control-Allow-Origin' : '*', 'Accept' : 'application/json' }); line and the request will work. As the answer here points out, Access-Control-Allow-Origin is a response header, not a request header. So don’t send it in a request, ever. Including it in the request is what’s actually causing your browser to send an OPTIONS preflight request instead of the GET. And it’s OK to send Accept: application/json but the request will also work fine without it.

Peter Matisko Over a year ago

It doesn't work. I added the headers just to test it based on some online advice. I tried jsonp instead. It works on localhost:3000, but not with localhost on wamp. I am a bit desperate here.

raj Over a year ago

you removed the options and still gets the same error?

Austyns · Accepted Answer · 2017-03-27 09:37:11Z

0

Just remove the headers and options arguments from the get function

answered Mar 27, 2017 at 9:37

Austyns

7602 gold badges14 silver badges22 bronze badges

Collectives™ on Stack Overflow

Angular2 bit.ly 'Access-Control-Allow-Origin' header issue

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related