React + ASP.NET.Core：所请求的资源上不存在“ Access-Control-Allow-Origin”标头

Question

实际上，这不是重复的帖子，我知道在stackoverflow社区中多次问过的标题的一部分，我阅读了所有帖子和答案，但是我认为我使用的问题和技术是不同的。

首先，我应该提到的ASP.NET Core WEB/API是我的后端应用程序，Reactjs也是我的前端应用程序。

我阅读了一下CORS，发现必须CORS在ASP.NETApp 'Access-Control-Allow-Origin':'*'上启用并放入 请求的标头，但是在调用api时仍然出现以下错误：

所请求的资源上没有“ Access-Control-Allow-Origin”标头。因此，不允许访问源' http：// localhost：8080 '。该响应的HTTP状态代码为500。如果不透明响应满足您的需求，请将请求的模式设置为“ no-cors”，以在禁用CORS的情况下获取资源。

这是我的Startup.cs代码与CORS：

public void ConfigureServices(IServiceCollection services)
{

    // other lines of code
    services.AddCors(options =>
    {
        options.AddPolicy("AllowAll",
            builder =>
            {
                builder
                .AllowAnyOrigin()
                .AllowAnyMethod()
                .AllowAnyHeader();
            });
    });

    services.Configure<MvcOptions>(options =>
    {
        options.Filters.Add(new CorsAuthorizationFilterFactory("AllowAll"));
    });
    // other lines of code
}

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{
    loggerFactory.AddConsole(Configuration.GetSection("Logging"));
    loggerFactory.AddDebug();
    app.UseCors("AllowAll");
    app.UseAuthentication();
    app.UseMvc();
}

这是我的反应代码：

function save(message) {
    const requestOptions = {
        method: 'POST',
        mode: 'cors',
        headers: { ...authHeader(), 
            'Content-Type': 'application/json',    
            'Access-Control-Allow-Origin':'*',

    },
        body: JSON.stringify(message)               
    };
    return fetch(config.apiUrl + '/message/save', requestOptions).then(handleResponse, handleError);
}

感谢您的回复。

Answer 1

我最近有一个类似的问题。在我的情况下，它开始工作时，我说services.AddCors();我的ConfigureServices方法和这部分代码

app.UseCors(builder => builder
   .AllowAnyOrigin()
   .AllowAnyMethod()
   .AllowAnyHeader()
   .AllowCredentials());

用我的Configure方法 记住，在两种情况下都必须在 UseMvc（）调用之前添加这些调用。

Answer 2

经过两天艰难的日子，我终于找到了如何解决我的问题。事实上，你的一个评论对我来说是一个很好的线索。

@kirk-larkin 说：

响应具有 HTTP 状态代码 500 是这里的关键。当 ASP.NET Core 项目中出现异常时，会清除 CORS 标头。您应该尝试找出抛出异常的原因。

我多次跟踪我的代码，然后我发现我忘记在 Startup.cs 中注册我在控制器中使用的服务。

我在 Startup.cs 中调用了以下代码，我的问题解决了。

services.AddScoped<IMessageService, MessageService>();

Answer 3

对于 ASP.NET Core 2.1，当控制器抛出异常并导致错误 500 时，不会发送 CORS 标头。这应该在下一个版本中修复，但在那之前你可以使用中间件来解决这个问题。

看

• https://github.com/aspnet/CORS/issues/90#issuecomment-348323102
• https://github.com/aspnet/AspNetCore/issues/2378
• https://github.com/aspnet/CORS/issues/46

另请注意，使用凭据，您需要明确添加WithOrigins主机和端口，因为大多数浏览器只会忽略它（请参阅/sf/answers/1382132811/）：

  app.UseCors(builder =>
    builder
      .WithOrigins("http://localhost:4200")
      .AllowAnyHeader()
      .AllowAnyMethod()
      .AllowCredentials()
  );