CORs 仅在尝试将文件发送到 API 时出现错误

Question

我有一个调用 C# .net Core 2.2 API 的 React 应用程序客户端。

该 API 与所有其他路由都能正常工作。 （在 PostMan 中测试并在使用 AXIOS 的应用程序中的函数上运行良好） 我创建了一条上传文件的路线。 这条路线在 PostMan 上工作正常，但是当我调用应用程序中的函数时， 路线返回错误：

从源“http://localhost:3000”访问“https://localhost:44356/upload/”的 XMLHttpRequest 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：无“访问” -Control-Allow-Origin'标头存在于请求的资源上。

我的代码：

上传功能：

    export const Upload = (ma, password, Files) => {
    const formData = new FormData();
    Files.forEach(file => {
        formData.append("files", file);
    });

    return new Promise((resolve, reject) => {
        axios.post(vars.servidor + 'upload/',
            formData, { headers: { "Content-Type": "multipart/form-data", "Access-Control-Allow-Origin": "*" } }
        ).then((response) => {
            resolve(response.data);
        }, (erro) => {
            reject(erro);
        });

    })
}

C# - Controllers.cs（接收调用的服务器路由）

 [HttpPost]
[Route("upload")]
public async Task<IActionResult> Upload(List<IFormFile> files)
{
    try
    {
        if (files.Count > 0)
        {
            await _fileService.SaveFiles(files);
            return Ok(await _fileService.GetFiles());
        }
        else
        {
            return StatusCode(204, "Erro ao enviar os arquivos!");
        }
    }
    catch (Exception e)
    {
        return StatusCode(500, e.Message);
    }
}

启动.cs：

public void ConfigureServices(IServiceCollection services)
{
    services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Latest);
    services.AddCors(options =>
    options.AddPolicy("CorsPolicy", builder => builder
    .AllowAnyOrigin()
    .AllowAnyMethod()
    .AllowAnyHeader()
    .AllowCredentials()
    )
    );

    services.AddScoped<IFileService, FileService>();
    services.AddSingleton((_) => Configuration);

}

// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    else
    {
        app.UseHsts();
    }

    app.UseCors("CorsPolicy");
    //app.UseCors("LowCorsPolicy");

    app.UseHttpsRedirection();
    app.UseMvc();
    app.UseStaticFiles();
}

Answer 1

我找到了解决办法： 将 API 调用从 axios 更改为 fetch。效果很好。

export const Upload = (ma, password, files) => {
return new Promise((resolve, reject) => {
    const data = new FormData();
    files.forEach(file => {
        console.log(file);
        var obj = dataURIToBlob(file);
        console.log(obj);

        data.append("files", obj);
    });

    const options = { method: 'POST', body: data };
    fetch(vars.servidor + 'upload/', options).then((response) => {
        resolve(response.json());
    }, (erro) => { reject(erro); });
})

}