为啥调用 API 时出现 CORS 错误

Posted 2023-03-04

【中文标题】为啥调用 API 时出现 CORS 错误

【英文标题】：Why I'm having CORS error when calling an API为什么调用 API 时出现 CORS 错误

【发布时间】：2020-06-17 16:41:34

【问题描述】：

我在前端使用Angular，在后端使用C#，当我尝试编辑字段并保存时出现此错误：

Access to XMLHttpRequest at 'http://192.168.220.14:81/api/registry' from origin 'http://artc.tj' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

PUT http://192.168.220.14:81/api/reg polyfills-es2015.23e79c711e3c227d781f.js:1 PUT http://192.168.220.14:81/api/registry net::ERR_FAILED

Error Scrinshot

Startup.cs：

 public void ConfigureServices(IServiceCollection services)
 
     //CORS
     services.AddCors(options =>
     
         options.AddPolicy(MyAllowSpecificOrigins,
         builder =>
         
             builder.WithOrigins("http://localhost",
                                 "http://localhost:4200",
                                 "http://artc.tj",
                                 "http://192.168.220.14")
                                    .AllowAnyMethod()
                                    .AllowAnyHeader()
                                    .AllowCredentials();
         );
     );
  

【问题讨论】：

响应的 HTTP 状态码是什么？您可以使用浏览器开发工具中的网络窗格进行检查。是 4xx 还是 5xx 错误而不是 200 OK 成功响应？

你在configure方法中添加app.UseCors(MyAllowSpecificOrigins); 了吗？

我猜你注册中间件太晚了。见***.com/a/60038513/5517088

这能回答你的问题吗？ ASP.NET 5/Core/vNext CORS not working even if allowing pretty much everything

【参考方案1】：

确保在 Configure 方法中使用 Cors()。

Startup.cs

public class Startup

   //...
   readonly string MyAllowSpecificOrigins = "_myAllowSpecificOrigins";

   public void ConfigureServices(IServiceCollection services)
   
      //...
         services.AddCors(options =>
         
             options.AddPolicy(MyAllowSpecificOrigins,
             builder =>
             
                 builder.WithOrigins("http://localhost:4200")
                     .AllowAnyHeader()
                     .AllowAnyMethod()
                     .AllowAnyOrigin();
             );
         );
      //...
   

   public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
   
      //...
      app.UseCors(MyAllowSpecificOrigins);
      //...
   
   //...

附：还要确保在您的客户请求中包含withCredentials: false httpOptions

【参考方案2】：

我认为您在从Angular 端发送请求时缺少标头。这是我通常做的：

Startup.cs

public void ConfigureServices(IServiceCollection services)

     services.AddCors(options =>
     
         options.AddPolicy("Default", policy =>
         
             policy.AllowAnyOrigin()
                   .AllowAnyHeader()
                   .AllowAnyMethod();
         );
     );


public void Configure(IApplicationBuilder app, IHostingEnvironment env)

    app.UseCors("Default");

角度请求：

callAPI() 
   return this.httpClient
            .get(API_URL, headers: 'Access-Control-Allow-Origin' : '*');

【讨论】：

客户端不决定服务器授予谁访问权限。 Access-Control-Allow-Origin 是服务器发送的响应头

【参考方案3】：

你没有。您向其发出请求的服务器必须实施 CORS 以授予 javascript 从您的网站访问权限。您的 JavaScript 无法授予自己访问其他网站的权限。

使用来自 chrome 浏览器网络商店的 CORS 扩展。

希望这可能会改变你的看法