Téléchargement de fichier angulaire avec repos facile jax rs java ee service web

Question

Je suis en train de télécharger une image sur un serveur en utilisant Angular comme front-end et jax ee service web jax reste facile comme mon arrière-plan. Ce mon code pour l'avant angulaire /:

page HTML:

<md-card> 
    <input type="file" (change)="onChange($event)" placeholder="Upload   files" > 

</md-card> 

Pour le composant:

fileChange(event) { 
    let fileList: FileList = event.target.files; 
    let fileListLength = fileList.length; 
    if(fileListLength > 0) { 
     let formData:FormData = new FormData(); 
     for (var i = 0; i < fileListLength; i++) { 
     formData.append("uploadFile[]", fileList[i]); 
    } 

    let headers = new Headers(); 
    headers.append('Content-Type', 'multipart/form-data'); 
    headers.append('Accept', 'application/json'); 
    let options = new RequestOptions({ headers: headers }); 
    this.http.post("http://localhost:8080/BCWEB/uploadProdImage", formData, options) 
     .map(res => res.json()) 
     .catch(error => Observable.throw(error)) 
     .subscribe(
      data => console.log('success'), 
      error => console.log(error) 
     ) 
    } 
} 

Pour la java back-end ee service web reposant:

private static final String SERVER_UPLOAD_LOCATION_FOLDER = "C://Users/007EAA/Downloads/tes/"; 

@POST 
@Path("/uploadProdImage") 
@Consumes("multipart/form-data") 
public Response uploadFile2(MultipartFormDataInput input) { 

    String fileName = ""; 

    Map<String, List<InputPart>> formParts = input.getFormDataMap(); 

    List<InputPart> inPart = formParts.get("file"); 

    for (InputPart inputPart : inPart) { 

     try { 

      // Retrieve headers, read the Content-Disposition header to obtain the original name of the file 
      MultivaluedMap<String, String> headers = inputPart.getHeaders(); 
      fileName = parseFileName(headers); 

      // Handle the body of that part with an InputStream 
      InputStream istream = inputPart.getBody(InputStream.class,null); 

      fileName = SERVER_UPLOAD_LOCATION_FOLDER + fileName; 

      saveFile(istream,fileName); 

      } catch (IOException e) { 
      e.printStackTrace(); 
      } 

     } 

      String output = "File saved to server location : " + fileName; 

    return Response.status(200).entity(output).build(); 
} 

// Parse Content-Disposition header to get the original file name 
private String parseFileName(MultivaluedMap<String, String> headers) { 

    String[] contentDispositionHeader = headers.getFirst("Content-Disposition").split(";"); 

    for (String name : contentDispositionHeader) { 

     if ((name.trim().startsWith("filename"))) { 

      String[] tmp = name.split("="); 

      String fileName = tmp[1].trim().replaceAll("\"",""); 

      return fileName; 
     } 
    } 
    return "randomName"; 
} 

// save uploaded file to a defined location on the server 
private void saveFile(InputStream uploadedInputStream, 
    String serverLocation) { 

    try { 
     OutputStream outpuStream = new FileOutputStream(new File(serverLocation)); 
     int read = 0; 
     byte[] bytes = new byte[1024]; 

     outpuStream = new FileOutputStream(new File(serverLocation)); 
     while ((read = uploadedInputStream.read(bytes)) != -1) { 
      outpuStream.write(bytes, 0, read); 
     } 
     outpuStream.flush(); 
     outpuStream.close(); 
    } catch (IOException e) { 

     e.printStackTrace(); 
    } 
} 

Le problème est que l'en-tête 'Access-Control-Allow-Origin' est présent sur la ressource demandée. L'origine 'http://localhost:4200' n'est donc pas autorisée. La réponse avait un code de statut HTTP de 500.

Mais quand j'essaie d'ajouter un utilisateur sur le serveur, il est ajouté sans aucun problème, donc ce n'est pas un problème de serveur. Quelqu'un peut-il aider?

Answer 1

Le problème est que votre interface et votre backend existent sur différents hôtes locaux, et par défaut, les demandes d'origine croisée sont refusées pour des raisons de sécurité. Vous devez activer les demandes d'origine croisée sur votre backend pendant le test, et le désactiver pour la production lorsque votre frontend et backend vivent dans la même zone. Pour activer l'origine croisée, vous aurez besoin d'ajouter cet extrait de fournisseur:

package com.yourdomain.package; 

import java.io.IOException; 

import javax.ws.rs.container.ContainerRequestContext; 
import javax.ws.rs.container.ContainerResponseContext; 
import javax.ws.rs.container.ContainerResponseFilter; 
import javax.ws.rs.ext.Provider; 

@Provider 
public class CORSFilter implements ContainerResponseFilter { 

    @Override 
    public void filter(final ContainerRequestContext requestContext, 
         final ContainerResponseContext cres) throws IOException { 
     cres.getHeaders().add("Access-Control-Allow-Origin", "*"); 
     cres.getHeaders().add("Access-Control-Allow-Headers", "origin, content-type, accept, authorization"); 
     cres.getHeaders().add("Access-Control-Allow-Credentials", "true"); 
     cres.getHeaders().add("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS, HEAD"); 
     cres.getHeaders().add("Access-Control-Max-Age", "1209600"); 
    } 

} 

Infos sur CORS

Snippet tiré de this question si