Angular2: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access

Question

I have seen this, and i have some questions.

I want to get the response from this uri:

http://www.instagram.com/justinbieber/media/

and i have implemented the following code for it:

import {Http,Headers} from '@angular/http';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import {Component,Injectable} from '@angular/core';
import {Gallery} from './gallery';    

@Injectable()
export class InstagramService{

    constructor( private _http:Http ){            

    }

    getGallery(username: string) : Observable<Gallery> {

        return this._http.get("http://www.instagram.com/justinbieber/media/" ).map(res =>  res.json());                                                                            
    }
}

Unfortunatlly, when i call this service it complains with :

XMLHttpRequest cannot load https://www.instagram.com/justinbieber/media/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

So there are some questions for me:

1- I can get the response from my browser or even postman, but not in my code. What makes this problem?

2-In case that, there is something wrong in my code, please provide your suggestion?

Hint: This uri does not support jsonp.get too.

score 1 · Accepted Answer · edited May 23 '17 at 11:46

1

You should use the Instagram API instead that supports JSONP. Here is a sample:

constructor(private jsonp:Jsonp) {
  let url = 'https://api.instagram.com/v1/tags/ootd/media/recent?client_id=someidnumbersxxxxxxxxxxxxxx&callback=JSONP_CALLBACK';
  jsonp.request(url, { method: 'Get' })
       .subscribe((res) => {
         (...)
       });
}

See these questions for more details:

edited May 23 '17 at 11:46

Community

1
1

answered Aug 09 '16 at 12:13

Thierry Templier

198,364
44
396
360

1

The problem is that it's not a problem in your Angular2 application. With Postman, things are a bit different since it's a chrome plugin so restrictions regarding HTTP calls aren't the same. To fix the error you receive, something must be done on the server side so it's up to Instagram. Same things for JSONP support. That's why I dealt with with the Instagram API which supports JSONP. Hoping that it answers your question ;-) – Thierry Templier Aug 09 '16 at 12:22
1

Perhaps this article could interest you: http://restlet.com/blog/2015/12/15/understanding-and-using-cors/. – Thierry Templier Aug 09 '16 at 12:24
This article as well: http://restlet.com/blog/2016/09/27/how-to-fix-cors-problems/ – Thierry Templier Nov 01 '16 at 19:26

Angular2: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access

1 Answers1