CODEWITHSUNDEEP
javascriptjava
kan zied
kan zied

Reputation: 91

javascript post blob to back-end java

i recorded a video using javascript (with recordRTC) , now i have it as a blob :

 mediaRecorder.onstop = (ev)=>{    
     let blob = new Blob(chunks, { 'type' : 'video/mp4;' });
    chunks = [];
    let videoURL = window.URL.createObjectURL(blob);
    vidSave.src = videoURL;  
     var file = new File([blob], 'video.mp4', {
         type: 'video/mp4'
     });
    invokeSaveAsDialog(file);

    // my attempt to send this blod //
    let req = new XMLHttpRequest();
    let formData = new FormData();
    formData.append("video", blob);                                
    req.open("POST", 'http://localhost:8081/avi/recieveAndParseVideo');
    req.send(formData);
     //
}

now i am trying to send it to my back-end application i dont know how , i created a java method:

@PostMapping("/recieveAndParseVideo")
    public String uploadingPost(@RequestBody MultipartFile uploadingFile) throws IllegalStateException, IOException {

        System.out.println(uploadingFile);
        File file = new File("C://" + uploadingFile.getOriginalFilename());
        uploadingFile.transferTo(file);

        return file.getName();
    }

when i execute the top javascript method it throws this exception: 

Access to XMLHttpRequest at 'http://localhost:8081/avi/recieveAndParseVideo' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

guys i dont even know if this is the right way to send a post via javascript , and is my java code correct to receive the file? please help

Upvotes: 0

Views: 447

Answers (1)

BEVR1337
BEVR1337

Reputation: 649

Welcome to the terrible and wonderful world of CORS. Cross-Origin Resource Sharing is what keeps you and me safe while we're browsing the Internet. Without it, websites could download and perform any code or content they wanted.

Imagine a website, foo.example was compromised. Someone found a way to make it download malicious code from their own website, bar.example. Without CORS policies, your browser would gladly run that code! With CORS, your browser says 'Hey wait a second, I'm at foo.example, why would I run code from another website?'

For local testing, your best solution is to install and configure a CORS plugin to your browser. An example for FireFox is CORS Everywhere, found here. This will let you access resources at localhost:8081 from localhost:4200.

For production, your server will need to send the appropriate response headers to your website, e.g. Access-Control-Allow-Origin: yourWebsite.example

More information about why and how CORS works

Upvotes: 1

Related Questions