javascript - 使用 Angular 和 ASP WEB API CORE 上传文件？

Question

我有 CORS 策略，可以很好地处理所有请求(使用 content-type:application/json)。但是当我尝试上传文件并使用 content-type:multipart/form-data 时出现错误:

XMLHttpRequest 无法加载 http://localhost:20377/api/posts。请求的资源上不存在“Access-Control-Allow-Origin” header 。因此，不允许访问源“http://localhost:4200”。响应的 HTTP 状态代码为 500。

我不明白为什么这不适用于 multipart/form-data 但适用于 application/json。 这是代码: Startup.cs 中的策略设置

 services.AddCors(options =>
        {
            options.AddPolicy("CorsPolicy",
                builder => builder.AllowAnyOrigin()
                .AllowAnyMethod()
                .AllowAnyHeader()
                .AllowCredentials());
        });

Angular 方法:

public createPost(title: string, body: string, file:File) {
    const token = this.authService.getToken();
    let formData: FormData = new FormData();
   
    formData.append('File', file, file.name);
    formData.append('Title', title);
    formData.append('Body', body);
    console.log(formData);
    return this.http.post('http://localhost:20377/api/posts', formData,
        {headers: new Headers({'Content-Type': 'multipart/form-data'})})
        .map(res => {
            console.log(res);
        });

Web API 核心 Controller :

    [EnableCors("CorsPolicy")]
    [HttpPost]
    public IActionResult CreatePost([FromBody] PostCreate model)
    {
        return Ok(model.Body);
    }

Answer 1

已解决

我的错误在于我在 Controller 操作中传递 FormBody 数据，而没有在我的 Angular 请求中传递任何 header 。 需要更改:

    [HttpPost]
    public IActionResult CreatePost([FromForm] PostCreate model)
    {
        return Ok(model);
    }

还有 Angular

    return this.http.post('http://localhost:20377/api/posts', formData)
        .map(res => {
            console.log(res);