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

问题描述

是的，这是一个非常有名的问题，我尝试了之前堆栈溢出 QnA 中提到的许多方法，但没有任何效果.我正在尝试使用

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 中工作，但是当我将 URL 替换为任何其他假 API 我可以获取数据，但是上面提到的 API 没有提供数据，如果有人能帮我解决这个问题，那将是一个很大的帮助.

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 这样的扩展或工具都不受此约束.这就是您通过 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.

由于您调用的是第 3 方 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).

通过代理请求资源 - 最简单的方法，你可以做的是，编写一个小型节点服务器(或者如果你已经有一个后端将它与你的前端关联，你可以使用它) 执行对 3rd 方 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.

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