调用第三方API时处理CORS [英] Handling CORS when calling 3rd party API

问题描述

是的，这是一个非常著名的问题，我已经尝试了前面的堆栈溢出QnA中提到的许多方法，但是没有任何效果.我正在尝试使用 BANZAI-Cloud API在我的应用程序中，但出现以下错误

yes this is a very famous question , I have tried many ways mentioned in the previous stack-overflow QnA, but nothing worked. I am trying to use BANZAI-Cloud API in my application , but it gives the following error

这是我的服务类代码

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中工作，但是当我用任何其他伪造的

this API works in the POSTMAN and CHROME but cannot get data into my angular application , when I replace the URL with any other fake API I can get data ,but the above mentioned API is not giving data ,If anyone can help me to clear this problem it would be a great help.

推荐答案

首先，您需要了解CORS检查是由浏览器完成的.这是W3C规范.诸如Postman之类的任何扩展或工具均不受此限制.这就是您通过邮递员获得结果的原因.

First, you need to understand that the CORS check is done by the browser. It's a W3C specification. Any extensions or tools like Postman are not bound with that. That's the reason you got the result through Postman.

另一件事是，您尝试将Access-Control-Allow-Origin标头添加到请求中.这不是CORS规范所期望的.您需要在响应中具有Access-Control-Allow-Origin标头.这意味着它需要在服务器端添加.

And the other thing is, you have tried to add Access-Control-Allow-Origin header to the request. That's not what CORS specification expects. You need to have the Access-Control-Allow-Origin header in the response. That means it needs to be added by the server-side.

由于您正在调用第三方API，因此我认为您无法控制服务器.因此，无法通过设置Access-Control-Allow-Origin来解决CORS问题.

Since you are calling a 3rd party API, I believe you don't have control over the server. Therefore asking to handle the CORS issue by setting up Access-Control-Allow-Origin will not be possible.

有3种方法可以解决此问题，前提是您无权访问服务器.

There are 3 ways you can resolve this problem assuming you don't have access to the server.

1. 通过在浏览器中禁用CORS检查(不建议用于生产环境).

1. By disabling CORS check in the browser(Not Recommended for Production).

通过在浏览器中使用CORS插件(不推荐用于生产环境).

By using a CORS plugin in the browser(Not Recommended for Production).

通过代理请求资源-最简单的方法是，编写一个小型节点服务器(或者如果您已经有一个后端将其与前端关联，则可以使用它) )，它会向第三方API发出请求，然后将响应发送回去.现在，在该服务器响应中，您可以允许跨域标头.

By requesting the resource through a proxy - The simplest way, what you can do is, write a small node server (or if you already have a back-end associate it with your front-end you can use it) which does the request for the 3rd party API and sends back the response. And in that server response now you can allow cross-origin header.

这篇关于调用第三方API时处理CORS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！