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 

 

 記錄下自己曾經趟過的坑  也希望能對其他小伙伴有些幫助


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM