在 Angular 中使用内容类型 multipart/form-data 发布答案

【问题标题】：Posting with content type multipart/form-data in Angular在 Angular 中使用内容类型 multipart/form-data 发布
【发布时间】：2018-02-24 17:22:01
【问题描述】：

我正在创建一个 API 端点以在 .net core 2 中上传文件，如下所示

 [HttpPost("{userId}/files")]
    public async Task<IActionResult> AddUserFile([FromRoute]string userId)
    {
        var file = Request.Form.Files.FirstOrDefault();

        var myFile = new MyFiles
        {
            FilePath = await UploadFile(file), // save the file and return url
            UserId = userId,
            FileName = Request.Form["fileName"],
            Description = Request.Form["description"]
        };

        // todo save file to database

        return Ok(myFile);
    }

我使用 Postman 测试了这个端点，它按预期工作。

当尝试从 Angular 应用程序调用此端点时，如下所示

onAddFile(form: NgForm) {

   const formData: FormData = new FormData();
   formData.append('', this.selectedFile);
   formData.append('fileName', form.value.fileName);
   formData.append('description', form.value.description);
   formData.append('userId', this.userId);

   const headers = new Headers();
   headers.append('accept-language', 'en');
   headers.append('Content-Type', 'multipart/form-data');
   headers.append('Authorization', `Bearer ${token}`);

   this.http.post(
     `https://localhost:44339/api/admin/users/${this.userId}/files`,
     formData,
     new RequestOptions({ headers: headers })
   ).subscribe(result => {
     console.log(result);
   });
 }

我收到以下错误

:44339/api/admin/users/c6d15e43-00b9-4eda-bac8-635f6017fec9/files:1 邮政 https://localhost:44339/api/admin/users/c6d15e43-00b9-4eda-bac8-635f6017fec9/files

edit:1 XMLHttpRequest 无法加载 https://localhost:44339/api/admin/users/c6d15e43-00b9-4eda-bac8-635f6017fec9/files。请求中不存在“Access-Control-Allow-Origin”标头资源。因此不允许使用原点“http://localhost:4200” 使用权。响应的 HTTP 状态代码为 500。

这是从 Angular 应用程序捕获的请求标头

:authority:localhost:44339
:method:POST
:path:/api/admin/users/c6d15e43-00b9-4eda-bac8-635f6017fec9/files
:scheme:https
accept:application/json
accept-encoding:gzip, deflate, br
accept-language:en-US,en;q=0.8,ar;q=0.6
authorization:Bearer eyJhbGciOiJIU.........
content-length:21531
content-type:multipart/form-data;
origin:http://localhost:4200
referer:http://localhost:4200/admin/users/c6d15e43-00b9-4eda-bac8-635f6017fec9/edit

和我的请求负载

------WebKitFormBoundaryqB4rbqWsrra0gwhi
Content-Disposition: form-data; name=""; filename="2017-08-22_21-56-02.png"
Content-Type: image/png


------WebKitFormBoundaryqB4rbqWsrra0gwhi
Content-Disposition: form-data; name="fileName"

er
------WebKitFormBoundaryqB4rbqWsrra0gwhi
Content-Disposition: form-data; name="description"

df
------WebKitFormBoundaryqB4rbqWsrra0gwhi
Content-Disposition: form-data; name="userId"

c6d15e43-00b9-4eda-bac8-635f6017fec9
------WebKitFormBoundaryqB4rbqWsrra0gwhi--

在试图找出问题时，我注意到只有当请求 content-type 是 multipart/form-data 时才会发生这种情况，在这种情况下我必须使用它才能上传文件。

我在这里遗漏了什么，是我在角度做错了什么还是我错过了服务器端 API 中的配置？

编辑：

启动时的cors配置

  app.UseCors(builder =>
                builder
                    .AllowAnyHeader()
                    .AllowAnyMethod()
                    .AllowAnyOrigin()
                    .AllowCredentials()
            );

【问题讨论】：

你能给我看看代码吗？你的服务器端 setHeader ?
您是否在后端启用了 CORS？例如。 docs.microsoft.com/en-us/aspnet/web-api/overview/security/… 显示您的响应标题...
@A.Tim，我编辑了显示我的 cors 配置的问题
@Chandru 你所说的“服务器端 setHeader”是什么意思！？
“响应的 HTTP 状态代码为 500。” 仅表示服务器端的故障已停止执行。这是您需要确定原因并修复的实际问题。事实上，在 500 错误响应中没有“Access-Control-Allow-Origin”标头实际上并不重要，因为服务器告诉您有一些致命错误——一些服务器端故障——阻止了服务器在全部。（许多或大多数服务器不会将 'Access-Control-Allow-Origin' 标头添加到 5xx 或 4xx 错误响应中，而只会将该标头添加到 2xx 成功响应中。）

标签： angular asp.net-core-2.0 asp.net-core-webapi multipartform-data

【解决方案1】：

我终于能够克服这个问题，解决方法是从标题中删除内容类型

headers.delete('Content-Type');

不要留空这会导致错误

不正确的 Content-Type: , multipart/form-data;边界

【讨论】：

你在哪里发现他们？在请求或服务器上？我有同样的问题（
应请求-在客户端

【解决方案2】：

您必须按照 A.Tim 的建议在后端启用 CORS。以下是在 Java 中为基于 Spring 的应用程序是如何完成的。

public WebMvcConfigurer corsConfigurer() {
    return new WebMvcConfigurerAdapter() {
        @Override
        public void addCorsMappings(CorsRegistry corsRegistry) {
            corsRegistry.addMapping("/**").allowedMethods("*").allowedHeaders("*").allowedOrigins("*");
        }
    };
}

【讨论】：

【解决方案3】：

我相信你在 Angular 的 http url 中有错字：

https://localhost:44339/api/admin/users/${this.userId}/files

应该是（注意端口）

https://localhost:4200/api/admin/users/${this.userId}/files

或者更好的是，使用相对 url，以便自动计算主机。

如果您实际上是在 localhost 中运行这 2 个应用程序，请确保端口 44339 中的一个已配置 CORS。

Chrome 抛出此错误是因为您正在向不同端口的主机发送请求。请注意，仅出于测试目的，您可以在 Chrome 本地暂时禁用此安全措施，如果你有 Windows 按 Win+R 然后执行：

chrome --disable-web-security --user-data-dir

（必须先关闭所有 Chrome 实例，包括 Postman）

【讨论】：