如何为 Bigcommerce API 修复 Angular 中的 CORS 错误答案

【问题标题】：How to Fix CORS Error in Angular for Bigcommerce API如何为 Bigcommerce API 修复 Angular 中的 CORS 错误
【发布时间】：2020-08-04 04:42:54
【问题描述】：

我正在尝试将一个非常简单的 Angular 10 应用程序连接到 Bigcommerce API，但出现以下错误：

CORS 政策已阻止从源“https://angular-example123.stackblitz.io”访问“https://api.bigcommerce.com/stores/0r5ke/v3/products”获取：响应预检请求未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。

我正在使用 stackblitz.io，因为它提供了 Bigcommerce 所需的 https 连接。所以我的 app.component.ts 如下：

import { Component, VERSION } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Product } from './product';
import { Observable } from 'rxjs';


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  url ='https://api.bigcommerce.com/stores/0rfgr/v3/products';
  products: Observable<any>;

  constructor( private http: HttpClient ) {}

  getProducts() {
    let headers = new HttpHeaders();
    headers = headers.set('X-Auth-Token', '123456789').set('X-Auth-Client', '123456789').set('Access-Control-Allow-Origin', '*');
    this.products = this.http.get(this.url, { headers })
  }
}

product.ts 文件：

export interface Product {
  name: string;
}

如果我将 URL 更改为“https://jsonplaceholder.typicode.com/users”，它会起作用并显示数据。任何关于它为什么不能与 Bigcommerce 合作的帮助将不胜感激。

【问题讨论】：

只是一个评论——你不应该把你的 Auth Headers 放在客户端代码中——不要将它们嵌入到从浏览器运行的 JS 中。攻击者可以读取它们并使用它来攻击您商店的 API。创建一个服务器端应用程序并将凭据嵌入为环境变量。
是的，感谢您的提示。经过研究，我发现 Bigcommerce 不允许使用 CORS。我必须在 Bigcommerce 商店中安装和授权 Angular 应用程序。谢谢。
您不需要这样做，您只需要创建一个节点/后端服务器来代理 API 请求到 BC，并将数据发送到您的前端 - 您将后端配置为允许cors - 到某些域，或允许所有 cors。

标签： angular api bigcommerce

【解决方案1】：

您的后端 api 应该允许 CORS 连接。只有这样，您才能从客户端访问数据。它与 Angular 代码无关，而与 api 本身有关。

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSMissingAllowOrigin

【讨论】：

如果我将 URL 和标头放在 Postman 上，它可以完美运行。有没有您知道的解决方法？
它将在 Postman 中工作，因为它是从 Node.js 调用而不是客户端浏览器代码。您可以创建一个中继 api 的 Node.js 应用程序。这基本上是您可以调用调用 Bigcommerce API 的 api。确保您的 Node.js 应用程序具有启用 CORS 的 API。