.NET Core 2.2 API文件上传接口前端调用触发CORS错误问题

• 服务端CORS配置存在规则冲突：.NET Core CORS中间件明确禁止AllowAnyOrigin()和AllowCredentials()同时启用，该组合配置会导致中间件不会向响应中写入Access-Control-Allow-Origin头。文件上传请求携带multipart/form-data类型，不属于浏览器CORS规范中的简单请求，浏览器会先发送OPTIONS方法的预检请求，预检请求拿不到合法的CORS响应头就会直接拦截请求。其余普通接口多为简单请求，不会触发预检流程，因此之前能正常运行。Postman不受浏览器CORS安全策略限制，所以测试时不会报错。
• 前端请求配置存在错误：Access-Control-Allow-Origin是服务端返回的响应头，不需要在前端请求中手动添加；手动强制设置Content-Type: multipart/form-data会导致axios丢失自动生成的boundary分隔符参数，服务端无法正常解析表单内容，同时也会额外触发不必要的预检校验。

服务端修改（Startup.cs） #

调整CORS策略配置，解决规则冲突，开发环境下明确指定允许跨域的前端地址即可：

public void ConfigureServices(IServiceCollection services)
{
    services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Latest);
    services.AddCors(options =>
        options.AddPolicy("CorsPolicy", builder => builder
        // 明确指定前端项目运行地址，不要和AllowCredentials同时用AllowAnyOrigin
        .WithOrigins("http://localhost:3000")
        .AllowAnyMethod()
        .AllowAnyHeader()
        .AllowCredentials()
        )
    );

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

当前的中间件注册顺序是正确的，app.UseCors("CorsPolicy")放在UseMvc、UseHttpsRedirection之前即可，不需要调整顺序。

前端修改（上传函数） #

删除错误的自定义请求头，不要手动设置multipart/form-data类型，axios会自动识别FormData对象，生成带正确boundary参数的Content-Type头：

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

    return axios.post(vars.servidor + 'upload/', formData)
        .then(response => response.data)
        .catch(erro => Promise.reject(erro));
}

修改完成后重启.NET Core服务，再测试上传功能即可正常运行。

内容的提问来源于stack exchange，提问作者xaotix