邮政请求被当地Angular应用程序中的CORS策略阻止，但在Postman和Thunder客户端效果很好

Question

我正在开发一个Web应用程序，该应用程序以JSON的形式从远程服务器上的API中请求作业列表，因此我可以将它们插入垫子桌上。

该公司向我发送了一个我需要的API列表的链接，以及可以尝试使用请求的模板。为了澄清，看起来像 this 。

邮政请求就像模板上的魅力一样工作，邮递员和Thunder Client（在VSCODE上）。

• 这些是响应标题： ，

 access-control-allow-credentials: * 
 access-control-allow-headers: content-type,server,strict-transport-security,x-powered-by,date 
 access-control-allow-methods: GET,HEAD,POST,PUT,DELETE,CONNECT,OPTIONS,TRACE,PATCH 
 access-control-allow-origin: * 
 access-control-expose-headers: * 
 content-type: application/json; charset=utf-8 
 date: Mon,04 Jul 2022 14:39:42 GMT 
 server: Microsoft-IIS/10.0 
 strict-transport-security: max-age=2592000 
 x-content-type-options: nosniff 
 x-powered-by: ASP.NET

但是，在执行我的Angular App的请求时，它会引起错误，这是勇敢的浏览器控制台上的错误：

Access to XMLHttpRequest at '(***API URL***)' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

这是Mozilla Firefox控制台上的错误：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://blmbwebapi.weker.fr/api/jobs/listJobs. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 405.

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://blmbwebapi.weker.fr/api/jobs/listJobs. (Reason: CORS request did not succeed). Status code: (null).

我的代码看起来像这样：

* list-jobs.service.ts： （SIPPET）

export class ListJobsService {

  public baseUrl = "/* API URL */";

  constructor(private httpClient: HttpClient) { }

  public getJobs(): Observable<any> { 

    let body = {"pageIndex": 0,
                "pageSize": 10,
                "filters": [ {"filterName": "csvFile", 
                              "filterValue": "flash-sales-export_20170217_080032.csv", 
                              "filterValues": [ "string" ] } ],
                "sortInfos": [ {"sortColumn": "string",
                                "sortOrdor": 0 } ] };


    let options = { headers: new HttpHeaders().set('Content-Type', 'application/json') };
    return this.httpClient.post(this.baseUrl,body, options);
   }

jobs.component.ts ：（ smippet）

ngOnInit(): void {

    this.listJobsService.getJobs().subscribe(data => {
      this.jobs = data;
      console.log(data);});
    
  }

如果需要进一步的信息，请告诉我！

太感谢了。

Answer 1

问题解决了，

我与Angular CLI代理一起工作，并在我的根文件夹中创建了 proxy.conf.json 文件。我需要通过假装将API具有相同的起源来欺骗我的浏览器。它不需要载体令牌或API键。

然后，我使用：

ng serve-proxy-config proxy.conf.json

我的proxy.conf.json文件包含以下内容：

{
    "/api": {
        "target": "(THE REAL API URL)",
        "secure": true,
        "changeOrigin": true,
        "pathRewrite": {
            "^/api": ""
        }
    }
}

• /api对象指定属性，代理和
  嵌套对象指定配置。所以我改变了我的API
  服务方法中的URL http：// localhost：4200/api。
• pathrewrite属性允许我修改应用程序的方式
  与目标相互作用。

它变成了：

export class ListJobsService {

  public baseUrl = "http://localhost:4200/api";

  constructor(private httpClient: HttpClient) { }

  public getJobs(): Observable<any> { 

    let body = {"pageIndex": 0,
                "pageSize": 10,
                "filters": [ {"filterName": "csvFile", 
                              "filterValue": "flash-sales-export_20170217_080032.csv", 
                              "filterValues": [ "string" ] } ],
                "sortInfos": [ {"sortColumn": "string",
                                "sortOrdor": 0 } ] };


    let options = { headers: new HttpHeaders().set('Content-Type', 'application/json') };
    return this.httpClient.post(this.baseUrl,body, options);
   }