React 和 Entity Framework Core Web API 的 CORS 问题

Question

从 2 天以来，我一直在尝试使用 fetch 方法进行简单的 http 请求，但我无法摆脱 cors 错误。我将 http 标头放入 .htaccess 文件，但它似乎不起作用。

fetch('https://localhost:44326/api/Users', {
        header: {
            "Content-Type": "application/json"
        },
        method: 'POST',
        body: JSON.stringify({ obj })
    })
        .then(response => console.log(response));

我一直得到有关 Access-Control-Allow-Origin 标头丢失的信息。有什么想法吗？

启动配置：

public class Startup
{
    public Startup(IConfiguration configuration)
    {
        Configuration = configuration;
    }

    public IConfiguration Configuration { get; }

    // This method gets called by the runtime. Use this method to add services to the container.
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddControllers();
        services.AddDbContext<ImageContext>(options =>
        {
            options.UseSqlServer(Configuration.GetConnectionString("ImageDB"));
        });

        services.AddCors(c => c.AddPolicy("AllowOrigin", options => options.AllowAnyOrigin()));
    }

    // 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.UseAuthorization();

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

    }
}

Answer 1

不要忘记设置您的 credentials 参数...

fetch('https://localhost:44326/api/Users', {
        credentials: 'same-origin',
        header: {
            "Content-Type": "application/json"
        },
        method: 'POST',
        body: JSON.stringify({ obj })
    })

same-origin 用于当 React 应用程序在与其获取的服务器相同的域名上运行时。对于不同的域，将其更改为 include。查看Fetch() MDN Documents 上的 fetch() API。

或者，服务器端，您可以正确设置标头...

<?php

     header('Access-Control-Allow-Origin: https://mozilla.org');

?>

这是一个将 ReactApp 托管在 mozilla.org 上的示例。 CORS MDN Documents。希望这会有所帮助！