Да, это очень известный вопрос, я пробовал много способов, упомянутых в предыдущем QnA по переполнению стека, но ничего не помогло. Я пытаюсь использовать BANZAI-Cloud API в своем приложении, но это дает следующую ошибку введите описание изображения здесь

Вот мой код класса обслуживания

import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http';
import { Observable } from 'rxjs';
import { HttpHeaders } from '@angular/common/http';

@Injectable({providedIn:"root"})
export class PriceTableService{

    private priceurl = "https://banzaicloud.com/cloudinfo/api/v1/providers/google/services/compute/regions/asia-east2/products"
    // private priceurl = "https://jsonplaceholder.typicode.com/posts"

    constructor(private http:HttpClient){}
    httpOptions = {
        headers: new HttpHeaders({
            'Access-Control-Allow-Methods':'DELETE, POST, GET, OPTIONS',
            'Access-Control-Allow-Headers':'Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With',
            'Content-Type':  'application/json',
            'Access-Control-Allow-Origin':'http://localhost:4200'
        })
      };
    getPrices(){
            this.http.get(this.priceurl,this.httpOptions).subscribe(result=>{
            console.log(result);
            return(result);
        })
     }
    ngOnInit() {
    }
}

Этот API работает в POSTMAN и CHROME, но я не могу получить данные в мое угловое приложение, когда я заменяю URL-адрес любым другим поддельным API Я могу получить данные, но вышеупомянутый API не предоставляет данные. Если кто-то может помочь мне решить эту проблему, это было бы очень полезно.

1
Janith Udara 26 Сен 2019 в 21:18

3 ответа

Лучший ответ

Во-первых, вы должны понимать, что проверка CORS выполняется браузером. Это спецификация W3C. Любые расширения или инструменты, такие как Postman, не связаны с этим. Вот почему вы получили результат через почтальона.

Другое дело, что вы попытались добавить в запрос заголовок Access-Control-Allow-Origin. Это не то, что ожидает спецификация CORS. В ответе должен быть заголовок Access-Control-Allow-Origin. Это означает, что он должен быть добавлен на стороне сервера.

Поскольку вы вызываете сторонний API, я считаю, что вы не можете контролировать сервер. Поэтому запрос на обработку проблемы CORS путем настройки Access-Control-Allow-Origin будет невозможен.

Есть 3 способа решить эту проблему, если у вас нет доступа к серверу.

  1. Отключив проверку CORS в браузере (не рекомендуется для производства).

  2. Используя плагин CORS в браузере (не рекомендуется для производства).

  3. Запрашивая ресурс через прокси-сервер. Самый простой способ, который вы можете сделать, - это написать сервер небольшого узла (или, если у вас уже есть серверная часть, связывающая его с вашим интерфейсом, вы можете использовать его), который выполняет запрос для сторонний API и отправляет обратно ответ. И в ответе этого сервера теперь вы можете разрешить заголовок между источниками.

4
Kanishka Madhuranga 27 Сен 2019 в 05:40

В соответствии с этим ответом 3-м способом я сделал небольшой сервер узла с помощью экспресс-доставки и назвал его BANZAICLOUD, используя следующий код.

const express=require('express');
const request = require('request');
const app=express();

app.get('/data',(req,res,next)=>{
    request('https://banzaicloud.com/cloudinfo/api/v1/providers/google/services/compute/regions/asia-east2/products',
     function (error, response, body) {
         res.send(body)
    });  
});
const port =process.env.port || 3000;
app.listen(port,()=>{
    console.log(`From port ${port}`);
});

Затем вы можете использовать http://localhost:3000/data в интерфейсе и получать данные.

3
thilini wathsala 27 Сен 2019 в 16:03

Проверьте свои заголовки. Возможно, вы отправляете заголовки, которые не нравятся внешнему API (например, Authorization и т. Д.), Что может привести к этой ошибке.

0
phil294 6 Май 2020 в 18:19