Typescript CORS政策：否'；访问控制允许原点'；在ionic 2中请求的资源上存在标头

编辑：

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

<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>

我是混合开发的新手。我提到了使用ionic2在listview中解析json。但是，当我运行代码时，我只能看到浏览器中的空白屏幕。 下面我已经发布了代码。请检查：

页面。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);
  }
}

<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>

Pages.html:

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

<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>

列表视图
{{item.name.first |大写}}
{{item.gender}
按钮

我在控制台中得到了这个问题：

localhost/：1无法加载XMLHttpRequesthttp://api.randomuser.me/?results=10. 重定向自'http://api.randomuser.me/?results=10“到”https://api.randomuser.me/?results=10'已被CORS策略阻止：请求的资源上不存在'Access Control Allow Origin'标头。起源'http://localhost:8100因此，不允许访问。

---

非常感谢您的帮助。

我认为这会起作用：

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

我将此用于chrome扩展。然后我遵循以下步骤：

• 在chrome浏览器中，设置->扩展->向下滚动并单击 获取更多扩展
• 在chrome web store中搜索允许源代码允许控件，并将其添加到浏览器中

• 然后打开，启用跨源资源

---

控制台中有错误吗？

ionic serve

的命令行上有编译错误吗？@suraj抱歉。现在只有我知道了控制台。以前我认为是命令提示符。我发布了控制台问题。这是cors问题，请尝试设置代理。。此错误仅在浏览器中发生。而不是在设备中。此外，请确保其他内容已准备就绪。例如，http.get以正确的方式为您提供所需项目的名称和数组。此外，如果有任何UI错误，CORS不会仍然阻止客户浏览器中的请求吗？