Posting mit Inhaltstyp multipart/form-data in Angular

Question

ich einen API-Endpunkt Erstellen von Dateien in .net Core 2 wie folgt laden

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

ich diesen Endpunkt mit Postman getestet und es funktioniert wie erwartet.

wenn versucht, diesen Endpunkt von einer Winkel Anwendung aufrufen als

folgen

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

ich folgende Fehlermeldung

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

bearbeiten: 1 XMLHttpRequest kann https://localhost:44339/api/admin/users/c6d15e43-00b9-4eda-bac8-635f6017fec9/files nicht geladen werden. Kein 'Access-Control-Allow-Origin'-Header ist auf der angeforderten -Ressource vorhanden. Herkunft 'http://localhost:4200' ist daher nicht erlaubt Zugriff. Die Antwort hatte HTTP-Statuscode 500.

und das ist die aufgenommenen Request-Header von dem Winkel App

: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 

und meiner Anfrage Nutzlast

------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-- 

bei dem Versuch, um das Problem herauszufinden, habe ich festgestellt, dass dies nur passiert, wenn die Anfrage content-type 01 ist, die ich in diesem Fall verwenden muss, um die Datei hochladen zu können.

Was fehlt mir hier, mache ich etwas falsch in eckigen oder habe ich eine Konfiguration in der serverseitigen API verpasst?

---

Edit:

cors Konfiguration im Start

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

Answer 1

konnte ich dieses Problem endlich überwinden, die Lösung ist, den Inhaltstyp aus dem Header

löschen

headers.delete('Content-Type');

tun es nicht leer lassen, wird ein Fehler verursachen

Falsche Content-Type:, multipart/form-data; Grenze

Answer 2

Sie haben die CORS auf Backend zu aktivieren, wie mit A.Tim vorgeschlagen. Es folgt, wie es in Java für eine Spring-basierte App gemacht wird.

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

Answer 3

Ich glaube, Sie Fehler im Angular der HTTP-URL haben:

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

Es sollte sein (die Portnote)

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

Oder noch besser, verwenden Sie eine relative URL, damit der Host automatisch berechnet wird.

Wenn Sie tatsächlich diese 2 Anwendungen in localhost ausführen, stellen Sie sicher, dass das in Port 44339 CORS konfiguriert hat.

Chrome verursacht diesen Fehler, weil Sie eine Anforderung an einen Host in einem anderen Anschluss senden. Beachten Sie, dass nur für Testzwecke Sie diese Sicherheitsmaßnahme zeitlich deaktivieren kann lokal in Chrome, , wenn Sie Windows drücken Win + R und dann ausführen:

Chrom --disable-Web-Sicherheit --user-data -dir

(müssen Sie zuerst alle Chrome-Instanzen schließen, einschließlich Postman)