javascript 将 blob 发送到后端 java

Question

我使用 javascript(使用 recordRTC)录制了一个视频，现在我将它作为一个 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);
     //
}

现在我试图将它发送到我的后端应用程序，我不知道如何，我创建了一个java方法:

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

当我执行顶级 javascript 方法时，它会抛出此异常:

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.

伙计们，我什至不知道这是否是通过 javascript 发送帖子的正确方法，我的 java 代码接收文件是否正确？ 请帮忙

Answer 1

欢迎来到可怕又奇妙的 CORS 世界。跨源资源共享可以保证您和我在浏览互联网时的安全。没有它，网站就可以下载并执行他们想要的任何代码或内容。

想象一下一个网站，foo.example 被泄露了。有人找到了一种让它从自己的网站 bar.example 下载恶意代码的方法。如果没有 CORS 策略，您的浏览器将很乐意运行该代码!使用 CORS，您的浏览器会显示“嘿等一下，我在 foo.example，为什么我要从另一个网站运行代码？”

对于本地测试，最好的解决方案是在浏览器中安装并配置 CORS 插件。 FireFox 的一个示例是 CORS Everywhere，可找到 here 。这将允许您从 localhost:4200 访问 localhost:8081 上的资源。

对于生产，您的服务器需要将适当的响应 header 发送到您的网站，例如Access-Control-Allow-Origin:yourWebsite.example

More information about why and how CORS works