发布的内容类型的multipart/form-data的中角

我创建了一个API终点在.NET核心2为上传文件遵循发布的内容类型的multipart/form-data的中角

[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); 
    }

我测试用邮差为此点和它的作品作为预期。

当试图从一个角度应用程序中调用这个终点如下

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 /管理/用户/ c6d15e43-00b9-4eda- bac8-635f6017fec9 /文件：1个 POST https://localhost:44339/api/admin/users/c6d15e43-00b9-4eda-bac8-635f6017fec9/files

编辑：1的XMLHttpRequest无法加载https://localhost:44339/api/admin/users/c6d15e43-00b9-4eda-bac8-635f6017fec9/files。请求的资源上没有“Access-Control-Allow-Origin”标题。原因'http://localhost:4200'因此不允许访问。响应有HTTP状态代码500。

，这是从角应用

: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() 
      );

来源

2017-09-15 Mohamed Badr

你能告诉我代码吗？你的服务器端setHeader？ – Chandru

你在后端启用了CORS吗？例如。 https://docs.microsoft.com/en-us/aspnet/web-api/overview/security/enabling-cross-origin-requests-in-web-api显示您的RESPONSE标头... –

@ A.Tim，我编辑了显示我的cors配置的问题 –

我能够最终解决这个问题，解决方法是从头部删除的内容类型

headers.delete('Content-Type');

不保留它为空，这将导致一个错误

不正确的内容类型：，多/表单数据;边界

来源

2017-09-16 10:55:53

你在哪里阻止他们？在请求或服务器上？我有同样的问题（ – AlexNasonov

在请求 - 在客户端 –

您必须启用后端的CORS由A.Tim的建议。以下是基于Spring的应用程序在Java中的完成方式。

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

来源

2017-09-15 14:07:38 Raju

我相信你有角的HTTP URL一个错字：

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

它应该是（注意端口）

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

或更好的是，使用一个相对的网址，以便主机自动计算。

如果你真的在本地主机上运行这两个应用程序，请确保端口44339中的一个配置了CORS。

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

铬 - 禁用网络安全的user-data -dir

（你必须先关闭所有浏览器实例，包括邮差）

来源

2017-09-16 02:41:29

发布的内容类型的multipart/form-data的中角

回答

相关问题