从源“http://localhost:4200”访问“”处的 XMLHttpRequest 已被 CORS 阻止。我无权访问服务器

Posted 2023-03-04

【中文标题】从源“http://localhost:4200”访问“”处的 XMLHttpRequest 已被 CORS 阻止。我无权访问服务器

【英文标题】：Access to XMLHttpRequest at '' from origin 'http://localhost:4200' has been blocked by CORS. I don't have the access to server

【发布时间】：2022-01-03 22:19:28

【问题描述】：

我正在尝试使用公共 API，但我得到了一个失败的答案。我使用 Postman 和浏览器（如 google chrome 和 microsoft edge）进行了测试，我可以使用 API，但是当我尝试使用我的 Angular 应用程序使用 API 时，我没有成功的答案？？？？

答案是： “从源 'http://localhost:4200' 访问 'https://bio.torre.co/api/bios/ricovar96?s=fMoC3WTE0B' 的 XMLHttpRequest 已被 CORS 策略阻止：没有 'Access-Control-请求的资源上存在 Allow-Origin' 标头。"

我无权访问服务器，因为是公共 API，所以我不能输入 @CrossOrigin(origins = "http://localhost:4200")。这是错误：

这是 url API：https://bio.torre.co/api/bios/ricovar96?s=fMoC3WTE0B

我做了这一步但没有用：

在 package.json 的同一级别中创建一个 proxy.conf.json 文件，使用此结构：

    "*/api/*":
        "target": "https://bio.torre.co",
        "secure": false,
        "changeOrigin": true,
        "logLevel": "debug",
        "pathRewrite": "^/api" : ""
    

我修改了 package.json。我添加了我在脚本部分中创建的文件，如下所示：

“脚本”： ... "start": "ng serve --proxy-config proxy.conf.json", ...

我修改了这样创建的服务（在我在导入 HTTPClientModule 中设置的 app.module.ts 中）：

import  HttpClient  from '@angular/common/http';
import  Injectable  from '@angular/core';
import  Observable from 'rxjs';

@Injectable(
  providedIn: 'root'
)
export class ResumeService 
>     
  constructor(private http: HttpClient)  

  getUserData(id: string): Observable<any> 
    return this.http.get<any>(api/bios/ricovar96?s=fMoC3WTE0B");
  

我运行了 npm start。

但我得到了这个答案：

你认为它正在发生什么？

【参考方案1】：

我修复了在 .Net 中创建 API 的问题。此 API 使用了具有错误 CORS 的 API，但使用 .Net 中的配置方法中的此设置

        app.UseCors(x=>x
            .AllowAnyOrigin()
            .AllowAnyMethod()
            .AllowAnyHeader());

之后我在 Azure 中发布了这个 API。如果可以访问后端添加此配置，如果没有，请尝试联系IT部门并尝试添加此配置。如果您有其他解决方案，请在评论中留下