Question

我正在运行连接到Firebase的Angular 9项目。

我在CORS方面遇到问题，我有2种情况：

1。从我的Firestore数据库中请求图片网址

ERROR: Access to XMLHttpRequest at 'https://firebasestorage.googleapis.com .... from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

2。访问Fixer.io API

货币服务

import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";

@Injectable()
export class CurrencyService {
    constructor(private http: HttpClient) {}
    async loadCurrencies(): Promise<any> {
        var response = this.http.get("http://api.fixer.io/api/latest");
        response.subscribe((currencies) => {
            console.log(currencies);
        });
    }
}

ERROR: Access to XMLHttpRequest at 'http://api.fixer.io/api/latest' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

我已经阅读了很多有关堆栈溢出的文章和帖子，并提出了以下建议，但它们没有任何作用。

解决方案

***** 1。配置代理*****

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

Added the following to angular.json
"serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
            options": {
            "browserTarget": "fuse:build",
            "proxyConfig": "src/proxy.conf.json"
          },

******* 2。已安装Google Chrome扩展程序CORS Unblock *******

Answer 1

这不是Angular应用程序的问题...这是Firebase应用程序上的问题

CORS策略旨在阻止来自未指定服务器的域的请求以将响应发送至...，因此，为了从服务器获取响应，您需要告诉服务器允许来自本地主机的响应。通常，我们只允许所有服务器，但在节点中（例如firebase），则有一个库可用于非常轻松地为您的firebase应用配置CORS。

https://www.npmjs.com/package/cors

希望这对您有帮助...

角度允许跨原点请求

1 个答案: