从 Angular 中的 REST API 获取 HTTPS 时出错

Question

我有一个 Angular 应用程序正在运行，它使用外部 api 来获取国家/地区 ISO。 此 API 使用 https，它给了我一个错误。

问题是：当我在我的 Angular 本地环境中使用代理时，将 /iso-api/ 映射到真实的 url 就可以了。

"/iso-api/*": {
    "target": "https://www...",
    "pathRewrite": { "^/iso-api": "" },
    "secure": false,
    "changeOrigin": true,
    "logLevel": "debug"
}

但我希望它在生产中工作，所以我想使用真实的 url。

在我的服务器中，我已经返回了 Access-Control-Allow-Origin: * 标头。

我尝试使用 ssl 运行 angular 服务器（因为外部 api 使用 https），但我收到了同样的错误。

我知道一个解决方案是在服务器中实现代理，但我认为不应该这样做，并且可能有一种方法可以从前端检索这些数据。 请帮忙。

响应

这是 Chrome 中的网络错误：

在 Firefox 中，请求以 200 OK 结束并返回数据，但抛出 CORS 错误，我无法从应用程序访问数据：CORS header 'Access-Control-Allow-Origin' missing

常规

Request URL: https://www...
Referrer Policy: no-referrer-when-downgrade

请求标头

:method: GET
:scheme: https
accept: application/json, text/plain, */*
accept-encoding: gzip, deflate, br
accept-language: es-ES,es;q=0.9,en;q=0.8
origin: http://localhost:4200
referer: http://localhost:4200/app/login
sec-fetch-dest: empty
sec-fetch-mode: cors
sec-fetch-site: cross-site

响应标头

accept-ranges: bytes
cache-control: max-age=0
content-encoding: gzip
content-language: en-US
content-length: 68356
content-type: application/json
date: Mon, 27 Apr 2020 14:49:30 GMT
expires: Mon, 27 Apr 2020 14:49:30 GMT
referrer-policy: strict-origin-when-cross-origin
server-timing: cdn-cache; desc=HIT
server-timing: edge; dur=1
server-timing: ACTT;dur=0,ACRTT;dur=88
set-cookie: ... expires=Mon, 27 Apr 2020 16:49:30 GMT; max-age=7200; path=/; domain=...; HttpOnly
set-cookie: ... Domain=...; Path=/; Expires=Mon, 27 Apr 2020 18:49:30 GMT; Max-Age=14400; HttpOnly
set-cookie: ... Domain=...; Path=/; Expires=Tue, 27 Apr 2021 14:49:30 GMT; Max-Age=31536000; Secure
status: 200
vary: Accept-Encoding

更新

Angular 服务代码

import { HttpClient } from '@angular/common/http';

...

constructor(
    private _http: HttpClient,
    private _errorUtil: ErrorUtilService,
    private _converter: StoreConverter
  ) {}

...
  getCountries(): Observable<CountryWithLanguages[]> {
    return this._http.get<GetStoresResponse>(API.storeUrl).pipe(
      catchError(this._errorUtil.handle),
      map(result => result.stores),
      switchMap(stores => stores),
      filter(this._isActiveStore),
      map(store => this._converter.toView(store)),
      toArray()
    );
  }

为了为我使用 Angular 开发服务器的应用程序提供服务，我没有手动添加“Access-Control-Allow-Origin”标头，但是在浏览器中，我看到它正在被添加。

angular.json

"serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "push-web-app:build",
            "proxyConfig": "src/proxy-local.conf.json"
          },
         }

Answer 1

您不能从其他域请求资源。这将是一个安全漏洞。你可以在这里阅读更多：Same-origin policy

从您的服务器发送 Access-Control-Allow-Origin: * 不会让您访问上述 API。这个API的提供者需要给你访问这个API的权限，你不能给自己这个权限。

您发布的错误表明缺少Access-Control-Allow-Origin 标头。这意味着 API 没有发送此标头。

此 API 未发送 Access-Control-Allow-Origin 标头可能有两个原因。

1. 此 API 方面的配置错误。在这种情况下，您必须请求此 API 的提供者来解决此问题。
2. API 提供商故意限制对 API 的访问。在这种情况下，您必须要求此 API 的提供者允许您从您的域访问。

您还可以通过您的服务器代理请求。使用代理时的核心区别在于您的服务器从 API 而不是客户端浏览器读取资源。参见David's response 了解如何使用 nginx 配置代理。

Answer 2

您无法绕过 CORS 浏览器端。如果您无法修改服务器端，您唯一的解决方案是使用代理。

出于开发目的，您可以使用 Angular 的内置代理服务器，但不能用于生产。

这是执行此操作的基本 nginx 配置

server {
    listen          80;
    server_name     yourdomain.com; #domain where your angular code is deployed

    location /iso-api{

        RewriteRule                     ^/iso-api/(.*)$ /$1 break;
        proxy_pass                      https://thirdpartyapidomain.com; #url of the API you are trying to access
    }

    location
    {
        #Your normal angular location
        #try_files ...
    }
}

这将重定向请求，如

http://yourdomain.com/iso-api/countriesList 到 https://thirdpartyapidomain.com/countriesList;

由于现在客户端和服务器 API 调用在同一个域中，因此您不应该遇到 CORS 问题

Answer 3

尝试使用选项 withCredentials: true 的 .get 调用：

return this._http.get<GetStoresResponse>(API.storeUrl, { withCredentials: true }).pipe();

...和/或确保您的浏览器是最新的。

Answer 4

使用此站点解决 CORS 错误： https://cors-anywhere.herokuapp.com/

使用示例 https://cors-anywhere.herokuapp.com/https://freegeoip.app/json

this._http.get('https://cors-anywhere.herokuapp.com/https://freegeoip.app/json')

这只是一种解决方法，但它确实有效。使用它甚至只是为了了解错误是否与 CORS 或其他有关。