即使我允许所有来源，为啥我会收到 CORS 错误？

Posted 2023-03-04

【中文标题】即使我允许所有来源，为啥我会收到 CORS 错误？

【英文标题】：Why do I get CORS errors even though I'm allowing all origins?即使我允许所有来源，为什么我会收到 CORS 错误？

【发布时间】：2021-07-16 06:51:22

【问题描述】：

所以我使用 Vue 制作了一个 Web 应用程序，并且我正在使用 ASP.NET Web App (.NET 5) 作为后端。 当我在 localhost:44393 上本地运行 Web API 时，它可以很好地从本地运行的客户端发出 POST 和 GET 请求。 然后我点击“发布”将文件发送到我托管的地方。

此时，我将客户端用于发出请求的 URL 更改为 https://api.mywebsite.com，这与我现在发布它以来在本地运行的网站是同一个网站。 （它使用 fetch 发出这些请求，因此它将是 fetch("https://api.mywebsite.com/TheController/AddServer" ）

这就是奇怪的地方，因为当我发出注册或登录的帖子请求时，它工作得很好，但只要我转到“添加帖子”，这是一个发布到不同端点的表单API，我收到此错误。

访问“https://api.mywebsite.com/TheController/AddPost”获取 来自“https://mywebsite.com”的来源已被 CORS 阻止 政策：没有“Access-Control-Allow-Origin”标头出现在 请求的资源。如果不透明的响应满足您的需求，请将 请求模式为“no-cors”以获取禁用 CORS 的资源。

当我在本地运行 Web API 时不会发生这种情况。为什么它仅在我将文件发布到主机并使用实际域后才会发生？ （当客户端也在本地运行时，我尝试从客户端发出相同的请求，但它给出了完全相同的异常）

我把问题中的域名换成了mywebsite.com，因为我不想分享它。

这是我的配置服务

public void ConfigureServices(IServiceCollection services)

    services.AddCors(options =>
    
        options.AddPolicy(name: MyAllowSpecificOrigins,
                      builder =>
                      
                          builder.WithOrigins("https://mywebsite.com",
                                              "http://localhost:8080",
                                              "https://mywebsite.com/add")
                                              .AllowAnyOrigin()
                                              .AllowAnyHeader()
                                              .AllowAnyMethod();
                      );

    );
...

还有配置

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        
            if (env.IsDevelopment())
            
                app.UseDeveloperExceptionPage();
                app.UseSwagger();
                app.UseSwaggerUI(c => c.SwaggerEndpoint("/swagger/v1/swagger.json", "mcraftserverapi v1"));
            
            app.UseHttpsRedirection();
            app.UseRouting();

            app.UseCors(MyAllowSpecificOrigins);

            app.UseAuthentication();
            app.UseAuthorization();
            app.UseEndpoints(endpoints =>
            
                endpoints.MapDefaultControllerRoute();
                endpoints.MapControllers()
                     .RequireCors(MyAllowSpecificOrigins);
            );
        

【问题讨论】：

啊！谢谢！ :-)

我不会将.WithOrigins(...) 与.AllowAnyOrigin() 一起使用。这是没有意义的，因为您说“这些起源都可以”然后“所有起源都可以”。

我会尝试删除.WithOrigins(...)。当我第一次使用它时，我认为它会起作用，但事实证明，即使我指定了它，它也不允许原点。

见下文：docs.microsoft.com/en-us/aspnet/core/fundamentals/middleware/…

尝试使用F12开发者网络工具检查响应头，是否包含“Access-Control-Allow-Origin”属性？如果它不包含该属性，则必须添加它。此外，如果您的应用程序托管在 IIS 上，您可以尝试install IIS CORS module 并为应用程序配置 CORS。参考：Enable Cross-Origin Requests (CORS) in ASP.NET Core.

【参考方案1】：

你必须删除

 builder.WithOrigins("https://mywebsite.com",
  "http://localhost:8080"
 )

或

.AllowAnyOrigin()

不能同时使用