“访问 XMLHttpRequest 已被 CORS 策略阻止”即使我已允许所有源/标头/方法

Posted 2023-03-04

【中文标题】“访问 XMLHttpRequest 已被 CORS 策略阻止”即使我已允许所有源/标头/方法

【英文标题】："Access to XMLHttpRequest has been blocked by CORS policy" even though I have allowed all origin/headers/methods

【发布时间】：2021-08-02 23:49:15

【问题描述】：

我有一个带有 .NET Core 3.1 Web API 后端的 Vue 前端 Web 应用程序。我正在尝试对我的 API 进行 POST，但出现错误：

Access to XMLHttpRequest at 'https://myserver/myapi/address/4567' (redirected from 'http://myserver/myapi/address/4567') from origin 'http://myserver' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

我的网络 API 位于：https://myserver/myapi

我的 Vue Web 应用程序位于：https://myserver/mysite

在我的 .NET 的 Startup.cs 中：

private readonly string mySitePolicy = "mysite";

public void ConfigureServices(IServiceCollection services)

    services.AddCors(options =>
    
        options.AddPolicy(name: mySitePolicy,
            builder =>
            
                builder.AllowAnyOrigin()
                        .AllowAnyHeader()
                        .AllowAnyMethod();
            );
    );

    services.AddSingleton<AddressRepository>();
    services.AddSingleton<CustomerRepository>();

    services.AddControllers();

    services.Configure<IISServerOptions>(o =>
    
        o.AutomaticAuthentication = false;
    );


// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)

    if (env.IsDevelopment())
    
        app.UseDeveloperExceptionPage();
    

    app.UseHttpsRedirection();

    app.UseRouting();

    app.UseCors(policyName: mySitePolicy);

    app.UseAuthorization();

    app.UseEndpoints(endpoints =>
    
        endpoints.MapControllers();
    );

我已允许所有来源/标题/方法。我所有的 GET 请求都成功了，只有 POST 调用失败。是什么导致了错误？我该如何解决这个问题？

【问题讨论】：

你能发布整个配置部分吗？

嗨@Farid，确保对UseCors 的调用必须放在UseRouting 之后，UseAuthorization 之前。

@Sergey，我已经添加了整个 Configure 和 ConfigureServices 代码。

@Rena 我确实将 UseCors 放在了 UseRouting 之后。抱歉，我刚放假回来。

【参考方案1】：

... 来自“http://myserver”的来源已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头。

我的 Vue Web 应用程序位于：https://myserver/mysite

您认为 javascript 的来源是 https://myserver/mysite，但浏览器建议 js 的来源是 http://myserver。有两种方法，

1。更改为同源

将您的 javascript 来源从 http://myserver 更改为 https://myserver，因此前端 javascript 的来源相同。

2。在后端允许 CORS

            options.AddPolicy(name: mySitePolicy,
                              builder =>
                              
                                  builder.WithOrigins("http://myserver",
                                                      "https://myserver");
                              );

您可以通过发布标题（尤其是 Access-Control-Allow-Origin）来更新问题，以查看您的 CORS 配置是否有效。

【讨论】：

我确实允许所有来源。在我的 AddPolicy() 中，我放置了 AllowAnyOrigin()，因此调用站点无关紧要。 （至少我是这么认为的）

【参考方案2】：

此 CORS 错误通常是误报。换句话说，这个问题与 CORS 完全无关——但无论如何，服务器都会返回该错误。 您需要查看服务器日志（如果没有，请启用它）并查看实际异常