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

经过两天的苦难，终于我找到了解决问题的方法。实际上，您的评论之一对我来说是一个很好的线索。

@ kirk-larkin说：

响应的HTTP状态代码500是此处的关键。当您的ASP.NET Core项目中存在异常时，将清除CORS标头。您应该尝试找出为什么引发异常。

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

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

services.AddScoped<IMessageService, MessageService>();