如何处理 Angular 上的 CORS 政策问题？答案

【问题标题】：How to handle CORS policy issue on Angular?如何处理 Angular 上的 CORS 政策问题？
【发布时间】：2020-05-20 14:42:39
【问题描述】：

该项目只是一个没有使用服务器端语言的前端，我想从区块链图表中获取实时数据，我已经看到了类似问题和答案但在其他框架上的答案。没有为 angular 指定任何内容。我在 src 文件夹中创建了一个 proxy.conf.json 文件并添加了以下代码，但是当我检查浏览器时仍然得到同样的错误


{
    "/api/*": {
        "target": "http://localhost:3000",
        "secure": false,
        "logLevel": "debug"
    }
}

我已将 proxy.conf.jason 文件添加到 angular.json 下的 serve 部分，但我仍然不断收到错误：

“从源 'http://localhost:4200' 访问 XMLHttpRequest 在 'https://api.blockchain.info/charts/transactions-per-second?timespan=5weeks&rollingAverage=8hours&format=json' 已被 CORS 策略阻止：请求的资源上不存在 'Access-Control-Allow-Origin' 标头”

这是我的 ApiService 类：


import { Injectable } from '@angular/core';
import {HttpClient, HttpHeaders} from '@angular/common/http';

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

  constructor(private httpclient : HttpClient ) { }

    public dailychart(){
       return this.httpclient.get('https://api.blockchain.info/charts/transactions-per-second?timespan=5weeks&rollingAverage=8hours&format=json');
     }

}

【问题讨论】：

您的应用运行情况如何？这是构建和部署的版本吗？代理仅在开发中有效。
@zero298 我处于开发模式

标签： javascript html angular http

【解决方案1】：

Api.Blockchain 的文档说

查询 API 明文查询 api 从 blockchain.info 检索数据 如果您向 GET 请求添加 &cors=true 参数，则某些 API 调用可通过 CORS 标头使用

您可以在此处查看其余文档 https://www.blockchain.com/api/q

问候

【讨论】：

【解决方案2】：

这不是您配置代理的方式。请看一下documentation，因为看起来您只是在没有实际配置的情况下放入了示例代理。另请注意，您仍然需要处理生产的 CORS 问题，因为这仅在运行 Angular 开发服务器时有效。

但是，在开发过程中，您需要更改代理文件，以便定义一个虚拟端点，该端点将伪装成实际资源的端点，然后在您的代码中使用该虚拟端点。

所以，对你来说，将proxy.conf.json 更改为

{
    "/blockchain-info": {
        "target": "https://api.blockchain.info",
        "secure": false,
        "logLevel": "debug"
    }
}

和ApiService 到：

import {Injectable} from '@angular/core';
import {HttpClient, HttpHeaders} from '@angular/common/http';

@Injectable({providedIn: 'root'})
export class ApiService {
  constructor(private httpclient: HttpClient) {}

  public dailychart() {
    return this.httpclient.get('/blockchain-info/charts/transactions-per-second?timespan=5weeks&rollingAverage=8hours&format=json');
  }
}

您可以看到我们不再尝试直接拨打电话https://api.blockchain.info。相反，我们将它们发送到我们注册为/blockchain-info 的代理。现在，当 Angular 发现您正在向 /blockchain-info 发出请求时，它会向您发出正确的 URL 的非 CORS 触发请求（在浏览器之外）。

【讨论】：