Обработка CORS при вызове стороннего API - PullRequest
Новая
       45

Обработка CORS при вызове стороннего API

0 голосов
/ 26 сентября 2019

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

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

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 не предоставляет данные. Если кто-то может помочь мне решить эту проблему, это будет очень полезно.

Ответы [ 2 ]

2 голосов
/ 27 сентября 2019

В соответствии с этим ответом 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 в передней части и получить данные.

2 голосов
/ 27 сентября 2019

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

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

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

Существует три способа решения этой проблемы при условии, что у вас нет доступа к серверу.

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

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

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

...