簡體   English   中英

如何修復 Bigcommerce API 的 Angular 中的 CORS 錯誤

[英]How to Fix CORS Error in Angular for Bigcommerce API

我正在嘗試將一個非常簡單的 Angular 10 應用程序連接到 Bigcommerce API,我收到以下錯誤:

CORS 政策已阻止從源“https://angular-example123.stackblitz.io”訪問“https://api.bigcommerce.com/stores/0r5ke/v3/products”獲取:對預檢請求的響應不'不通過訪問控制檢查:請求的資源上不存在'Access-Control-Allow-Origin' header。 如果不透明的響應滿足您的需求,請將請求的模式設置為“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 合作的幫助將不勝感激。

您的后端 api 應該允許 CORS 連接。 只有這樣,您才能從客戶端訪問數據。 它與 Angular 代碼無關,但與 api 本身無關。

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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM