最近在學習一個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
記錄下自己曾經趟過的坑 也希望能對其他小伙伴有些幫助