首页 > 解决方案 > 来自 Angular 7 应用程序的第 3 方 api 请求的 chrome CORB 问题

问题描述

我编写了一个代码来从 3rd 方 API 获取数据。它在邮递员收藏和火狐浏览器中都有效。但在谷歌浏览器中,即使我启用了 CORS 扩展,它也会显示 CORB 错误。

名为 popup.component.ts 的 ts 文件

 import { Component, OnInit } from '@angular/core';
import { PopupService } from './popup.service';



@Component({
  selector: 'app-popup',
  templateUrl: './popup.component.html',
  styleUrls: ['./popup.component.scss']
})
export class PopupComponent implements OnInit {

rowData: any = [];

constructor(
private popupService: PopupService
  ) { }

  ngOnInit() {
    this.GpGetAllValues();
  }

  GpGetAllValues() {
 this.popupService.GpGetAllValues()
  .subscribe(
    data => {
       console.log('successfully get all data --- ', data);
       this.rowData = data.categories;
       console.log('after set the categories are -----   ', this.rowData);
    },
    error => {
       console.log('cannot able to get all data --- ', error);
    }
    );
}

}

名为 popup.service.ts 的服务文件

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';


@Injectable({
    providedIn: 'root'
})
export class PopupService {

  constructor(
private http: HttpClient
  ) { }

GpGetAllValues(): Observable<any> {
 return this.http.get(`https://api.stlouisfed.org/fred/category?category_id=125&api_key=1d6109900692021b3c0e18d9a1c9591f&file_type=json`);
}

}

在此处输入图像描述

在上面的截图中。我启用了 CORS 扩展,但出现错误。

标签: angulargoogle-chromebrowsergoogle-chrome-devtoolsangular7

解决方案


尝试关闭浏览器并杀死所有 chrome 实例并从 cmd 提示符重新启动浏览器 [chrome.exe" --disable-web-security]


推荐阅读