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

Question

我正在尝试从在 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。 我知道那里有很多类似的问题，但其中大多数配置了后端，我无权访问它。其余的对我不起作用。因此，任何帮助将不胜感激。

Answer 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的文档

Answer 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/

希望对你有帮助！！