如何在不更改后端的情况下解决 Angular 8 中的 CORS 问题？

Posted 2023-03-04

【中文标题】如何在不更改后端的情况下解决 Angular 8 中的 CORS 问题？

【英文标题】：How to address CORS issue in Angular 8 without changing the backend?

【发布时间】：2020-06-25 03:36:23

【问题描述】：

我正在尝试从在 localhost:4200 上运行的 Angular 应用程序向后端 (https://api.zenefits.com/core/people) 发送 GET 请求。我尝试了许多选项并阅读了许多博客文章，但找不到任何适合我的东西。我尝试使用代理方法解决此问题，因为我无权访问后端，但这仍然给我以下 CORS 错误：

Access to XMLHttpRequest at 'https://api.zenefits.com/external/people/' (redirected from 'http://localhost:4200/core/people') from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

以下是我的服务：

import  Injectable  from '@angular/core';
import  HttpClient, HttpHeaders  from '@angular/common/http';

@Injectable(
  providedIn: 'root'
)
export class EmployeeService 

  employeeQueryUrl: string;
  constructor(private http: HttpClient) 
    this.employeeQueryUrl = 'https://api.zenefits.com/core/people';
  

  getAllEmployees() 
    return this.http.get(
      this.employeeQueryUrl, 
        headers: new HttpHeaders(
          Authorization: 'Bearer elZxQlHDSUallvL3OnnH'));
  

以下是我的proxy.conf.json：

    "/core/*": 
      "target": "https://api.zenefits.com/core/people",
      "secure": false,
      "changeOrigin": true,
      "logLevel": "debug"
      

我尝试了很多方法，但都是徒劳的。文档不清楚文件的外观。我无法理解为什么错误消息中的 URL 也更改为 external/people 而不是 core/people。 我知道那里有很多类似的问题，但其中大多数配置了后端，我无权访问它。其余的对我不起作用。因此，任何帮助将不胜感激。

【参考方案1】：

您必须更改您的 api url 才能使用代理（使用相对 url），而不是直接使用 api 服务。

将以下变量更改为

this.employeeQueryUrl = '/core/people';

您的代理配置需要更新为

    "/core/*": 
      "target": "https://api.zenefits.com/",
      "secure": false,
      "changeOrigin": true,
      "logLevel": "debug"
      

然后，您的 api 调用将被代理接听，并将所有请求从 /core/* 重定向到 https://api.zenefits.com/core/*

这是来自Angular的文档

【讨论】：

我遵循了这个但仍然没有解决我的问题;(

您是否重新启动了服务器？我的意思是，您是否终止了进程并重新运行ng serve？

是的，我重启了服务器，问题依旧。

您是否将以下行添加到您的angular.json 服务 - 选项配置中？ "proxyConfig": "src/proxy.conf.json"?

我也想知道，你希望api调用最终是https://api.zenefits.com/external/people/还是https://api.zenefits.com/core/people/

【参考方案2】：

您无法使用 angular(front-end) 本身消除 CORS 错误，您还需要确定从后端解决它。

但是对于角度部分，你可以做的是使用 proxy.config 文件：

  
 "/api/*":   
  "target": "http://localhost:57263",  
  "secure": false,  
  "logLevel": "debug"  
   
 

并添加对 angular.json 文件的代理引用。

按照这些步骤，你会很高兴（下面的链接解决了 angular+node 的问题，对于你的后端技术，只需 google 搜索就可以了..） https://www.techiediaries.com/fix-cors-with-angular-cli-proxy-configuration/

希望对你有帮助！！

【讨论】：

我对此有点困惑。你说 Angular 自己解决不了，那为什么还要贴代理配置呢？目标也是后端的网址，对吗？或者是别的什么？实际上，这些是我陷入困境的一些细节，使我发布了这个问题。

我认为你应该阅读这篇文章，我从那里了解到 CORS。也许这会对你有所帮助link