Как исправить ошибку CORS в Angular для API Bigcommerce - PullRequest
Новая
       161

Как исправить ошибку CORS в Angular для API Bigcommerce

0 голосов
/ 04 августа 2020

Я пытаюсь подключить очень простое приложение Angular 10 к Bigcommerce API и получаю следующую ошибку:

Доступ к выборке в 'https://api.bigcommerce.com/stores/0r5ke/v3/products' из источника 'https://angular-example123.stackblitz.io' имеет был заблокирован политикой CORS: ответ на предполетный запрос не проходит проверку контроля доступа: в запрошенном ресурсе отсутствует заголовок Access-Control-Allow-Origin. Если непрозрачный ответ соответствует вашим потребностям, установите для режима запроса значение 'no-cors', чтобы получить ресурс с отключенным CORS.

Я использую stackblitz.io, поскольку он обеспечивает соединение https, которое требуется Bigcommerce. Итак, у меня есть свой 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.

1 Ответ

1 голос
/ 04 августа 2020

Ваш backend api должен разрешать соединение CORS. Только тогда вы можете получить доступ к данным от клиента. Это не связано с кодом Angular, а с самим api.

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

...