Question

我见过this，我有一些问题。

我想得到这个uri的回复：

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

我为它实现了以下代码：

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());                                                                            
    }
}

不幸的是，当我打电话给这项服务时，它会抱怨：

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.

所以我有一些问题：

1-我可以从我的浏览器甚至postman获得响应，但不能在我的代码中获得。是什么造成了这个问题？

2 - 如果我的代码中有问题，请提供您的建议吗？

提示：此uri也不支持jsonp.get。

Answer 1

您应该使用支持JSONP的Instagram API。这是一个示例：

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) => {
         (...)
       });
}

有关详细信息，请参阅以下问题：

Angular2：请求的资源上没有“Access-Control-Allow-Origin”标头。因此不允许原点'null'访问

1 个答案: