zoukankan      html  css  js  c++  java
  • springboot+vue前后端分离视频上传遇到的坑

    最近在学习一个springboot+vue的一个项目,里面有个视频上传的功能。前段使用element ui中的upload组件

    <el-form-item label="上传视频">
            <el-upload 
                name="file"
                :on-success="handleVideoUploadSuccess"
                :on-remove="handleVideoRemove"
                :before-remove="beforeVideoRemove"
                :on-exceed="handleUploadExceed"
                :file-list="fileList"
                :action="BASE_API+'/education_video/fileVideo/upload'"
                :limit="1"
                class="upload-demo">
                <el-button style="small" type="primary">上传视频</el-button>
                <el-tooltip placement="right-end">
                    <div slot="content">最大支持1G<br>
    
                    </div>
                    <i class="el-icon-question"/>
                </el-tooltip>
            </el-upload>    
        </el-form-item>

    BASE_API是在js中定义的一个变量

    BASE_API: process.env.BASE_API, // 接口API地址

    后端代码:

    import com.juhaowl.commom.ResponseResult;
    import com.juhaowl.video.service.VideoService;
    import io.swagger.annotations.Api;
    import io.swagger.annotations.ApiOperation;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.web.bind.annotation.*;
    import org.springframework.web.multipart.MultipartFile;
    
    
    /**
     * Created by Park on 2020-6-16.
     */
    @RestController
    @RequestMapping("/education_video/fileVideo")
    @Api(value = "上传视频")
    @CrossOrigin
    public class VideoController {
    
        @Autowired
        VideoService videoService;
    
        @ApiOperation(value = "视频上传")
        @PostMapping(value = "upload")
        public ResponseResult uploadVideoFile(MultipartFile file){
            String videoId = videoService.uploadVideo(file);
            return ResponseResult.success().data("videoId",videoId);
        }
    }

    问题报错:
    Access to XMLHttpRequest at 'http://localhost:9001/education_video/fileVideo/upload' from origin 'http://localhost:9528' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

    看到这个问题,第一想法就是跨域问题,然后检查各种涉及跨域的问题,也没发现哪里问题。最终经过B站小伙伴的指导,终于找到问题所在。

    导致这个问题的原因竟然是nginx配置文件里面没有配置 client_max_body_size 1024m 

     记录下自己曾经趟过的坑  也希望能对其他小伙伴有些帮助

  • 相关阅读:
    简单SSM配置详解
    Nginx 简介
    序列化与反序列化
    用HttpSessionListener与HttpSessionBindingListener实现在线人数统计
    Linux
    jsp标签精华(持续更新中)
    ZooKeeper 编程(一)
    maven环境快速搭建
    Web项目--------原Oracle数据库的项目同时兼容MySql
    JavaMail实现邮箱之间发送邮件功能
  • 原文地址:https://www.cnblogs.com/dzx-fiona/p/13228789.html
Copyright © 2011-2022 走看看