跨域设置

这样设置后，不但支持跨域，同时也支持put delete了。

    @WebFilter("/*")
    public class CorsFilter2 implements Filter {
    
        @Override
        public void init(FilterConfig filterConfig) throws ServletException {
        }
    
        @Override
        public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain)
                throws IOException, ServletException {
            HttpServletRequest request = (HttpServletRequest) req;
            HttpServletResponse response = (HttpServletResponse) resp;
            // 设置允许跨域
            response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
            // 设置开启Cookie
            response.setHeader("Access-Control-Allow-Credentials", "true");
            response.setHeader("Access-Control-Allow-Methods", "POST,GET,OPTIONS,DELETE,PUT");
            response.setHeader("Access-Control-Allow-Headers",
                    "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");
            response.setHeader("Access-Control-Max-Age", "3600");
            chain.doFilter(req, resp);
        }
    
        @Override
        public void destroy() {
        }
    }

前后端分离的文件上传

前端

        <template>
          <div>
            <!-- 选择要上传的文件 -->
            <input type="file" ref="uploadInput">
            <!-- 点击按钮触发文件上传事件 -->
            <button @click="handleUpload">上传</button>
          </div>
        </template>
         
        <script>
        import axios from 'axios';
         
        export default {
          methods: {
            handleUpload() {
              // 获取到选择的文件对象
              const file = this.$refs.uploadInput.files[0];
              if (file) {
                // 创建 FormData 对象并将文件添加到其中
                let formData = new FormData();
                formData.append('file1', file);
                // 发送 POST 请求，将文件数据作为表单数据提交
                axios.post('http://localhost:8082/springmvcstudy/upload', formData).then(response => {
                  console.log(res);
                  // 这里可以根据服务器返回的结果进行相应操作
                }).catch(error => {
                  console.error('文件上传失败', error);
                });
              } else {
                console.warn('未选择任何文件');
              }
            }
          }
        }
        </script>

controller##

    @RestController
    public class UploadController {
        /* file1跟前台的name属性对应*/
        @PostMapping("upload")
        public String upload(MultipartFile file1){
            //获取原始文件名
            System.out.println(file1.getOriginalFilename());
            
            return "success";
        }
    
    }