加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

typescript – CORS策略:在离子2中请求的资源上没有“Access-Co

发布时间:2020-12-17 17:54:48 所属栏目:安全 来源:网络整理
导读:编辑: 我是混合开发的新手.我将这个Sample称为使用ionic2在listview中解析json.但是当我运行代码时,我只能看到浏览器中的空白屏幕. 下面我发布了代码.请检查 : pages.ts: import { Component } from '@angular/core';import {Http} from '@angular/http';
编辑:

我是混合开发的新手.我将这个Sample称为使用ionic2在listview中解析json.但是当我运行代码时,我只能看到浏览器中的空白屏幕.

下面我发布了代码.请检查 :

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>

我在Console中遇到了这个问题:

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.

任何帮助表示赞赏.

解决方法

我将此 Allow Control Allow origin称为chrome扩展.然后我按照以下步骤操作:

>在Chrome浏览器中,设置 – >扩展程序 – >向下滚动并单击
获得更多扩展.
>搜索允许chrome web store中的origin allow control并将其添加到浏览器.

enter image description here


>然后启用启用跨源资源.

enter image description here

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读