CORS政策：“访问控制允许来源”标头出现在离子2

Question

编辑所请求的资源：

我是新来的混合development.I提到这个Sample解析在列表视图JSON使用ionic2。但是当我运行代码时，我只能看到浏览器中的空白屏幕。

下面我已经发布了代码。请检查：

pages.ts：

import { Component } from '@angular/core'; 
import {Http} from '@angular/http'; 
import { NavController } from 'ionic-angular'; 
import 'rxjs/add/operator/toPromise'; 
@Component({ 
    selector: 'page-home', 
    templateUrl: 'pages.html' 
}) 
export class SlidingPage { 
public items:any; 
    constructor(public navCtrl: NavController,public http: Http) { 
     this.http = http; 
     this.http.get("http://api.randomuser.me/?results=10") 
      .subscribe(data =>{ 

      // console.log(data['_body']); 

      // this.items=JSON.parse(data['_body']).results;//Bind data to items object 

      this.items = data.json(); 


      },error=>{ 
       console.log(error);// Error getting the data 
      }); 
    } 
buttonClick(event){ 
    console.log("button clicked"); 
    console.log(event); 
    } 
    itemClicked(event,itemData){ 
    console.log("item clicked"); 
    console.log(event); 
    console.log(itemData); 
    } 
} 

Pages.html：

<ion-header> 
    <ion-navbar> 

    <ion-title> 
    List View 
    </ion-title> 

    </ion-navbar> 
</ion-header> 

<ion-content padding> 
<ion-list> 
    <ion-item *ngFor="let item of items" (click)="itemClicked($event,item)"> 

    <ion-avatar item-left> 
     <img src="{{item.picture.thumbnail}}"> 
     </ion-avatar> 

     <h2>{{item.name.first | uppercase }}</h2> 
     <h3>{{item.gender}}</h3> 
     <ion-icon *ngIf="item.gender=='female'" name="woman" item-left></ion-icon> 
     <ion-icon *ngIf="item.gender=='male'" name="man" item-left></ion-icon> 
     <ion-icon name="heart" item-right></ion-icon> 

     <button ion-button item-right color="danger" (click)="buttonClick($event)">Button</button> 

    </ion-item> 
    </ion-list> 
</ion-content> 

我得到这个问题控制台：

localhost/:1 XMLHttpRequest cannot load http://api.randomuser.me/?results=10. Redirect from 'http://api.randomuser.me/?results=10' to 'https://api.randomuser.me/?results=10' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access. 

任何帮助表示赞赏。

Answer 1

我提到这个Allow Control Allow origin的Chrome扩展程序。然后我跟着这个下面的步骤：

• 的Chrome浏览器，设置 - >扩展 - >向下滚动并单击 获取更多扩展。

• 搜索允许起源允许Chrome网上应用店控制并将其添加到浏览器中。

  

• 然后打开上启用跨源资源。

  

Answer 2

我认为这将工作：

this.http.get("http://api.randomuser.me/?results=10") 
    .map(res => res.json()) 
    .subscribe(data => { 
     this.items = data; 
     console.log("Data is:",data,this.items); 
    },error=>{ 
     console.log(error);// Error getting the data 
    });