我尝试将一个非常简单的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协同工作的帮助都将不胜感激。
发布于 2020-08-04 05:27:13
您的后端api应该允许CORS连接。只有这样,您才能从客户端访问数据。它与Angular代码无关,而是api本身。
https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSMissingAllowOrigin
https://stackoverflow.com/questions/63240398
复制