Ant Design of Vue 使用a-upload 自定义上传路径，前后端报403问题

话不多说，上代码

vue html部分

<a-upload
    v-decorator="[
       'imgSrc',
       {
         rules: [{ required: true, message: '请上传照片' }],
       },
     ]"
     action="/face/file/upload"
     list-type="picture-card"
     :file-list="fileList"
     :remove="handleRemove"
     @preview="handlePreview"
     @change="handleChange"
   >

js部分

async handlePreview (file) {
	if (!file.url && !file.preview) {
	 file.preview = await getBase64(file.originFileObj)
	}
	this.imgSrc = file.url || file.preview
	this.previewVisible = true
},
handleRemove (file) {
	const index = this.fileList.indexOf(file)
	const newFileList = this.fileList.slice()
	newFileList.splice(index, 1)
	this.fileList = newFileList
	this.imgSrc = ''
},
handleChange ({ fileList }) {
	this.imgSrc = fileList[0].thumbUrl
	this.fileList = fileList
},

java后端

@RestController
@RequestMapping("/file")
public class FileUpload {

    @PostMapping("/upload")
    public JSONObject test(@RequestParam MultipartFile file){
        JSONObject result = new JSONObject();
        result.put("name","xxx.png");
        result.put("status","done");
        result.put("thumbUrl","https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png");
        result.put("url","https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png");
        return result;
    }
}

到这里就是整个流程，但是运行后发现上传路径报403

网友回答需要进行如下处理
标签中添加 header并设置为空

<a-upload
	v-decorator="[
	   'imgSrc',
	   {
	     rules: [{ required: true, message: '请上传照片' }],
	   },
	 ]"
	 action="/lhsmface/file/upload"
	 :headers="headers" 这里添加headers，在下图data中添加headers
	 list-type="picture-card"
	 :file-list="fileList"
	 :remove="handleRemove"
	 @preview="handlePreview"
	 @change="handleChange"
>

data () {
    return {
      headers: {}
    }
  },

springboot添加跨域配置类

import com.lhsm.facefactory.common.RequestJsonHandlerMethodArgumentResolver;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.http.converter.HttpMessageConverter;
import org.springframework.http.converter.StringHttpMessageConverter;
import org.springframework.web.method.support.HandlerMethodArgumentResolver;

import java.nio.charset.Charset;
import java.util.List;

/**
 * @ Author     ：AZY.
 * @ Date       ：Created in 14:38 2020/9/24
 * @ Description：${DESCRIPTION}
 */
@Configuration
@SuppressWarnings("deprecation")
public class WebConfig extends WebMvcConfigurerAdapter {

    @Override
    public void addArgumentResolvers(List<HandlerMethodArgumentResolver> argumentResolvers) {
        argumentResolvers.add(new RequestJsonHandlerMethodArgumentResolver());
    }

    @Bean
    public HttpMessageConverter<String> responseBodyConverter() {
        return new StringHttpMessageConverter(Charset.forName("UTF-8"));
    }

    @Override
    public void configureMessageConverters(List<HttpMessageConverter<?>> converters) {
        super.configureMessageConverters(converters);
        converters.add(responseBodyConverter());
    }

    // 控制跨域
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowCredentials(true)
                .allowedMethods("GET", "POST", "DELETE", "PUT")
                .maxAge(3600);
    }

}

一套组合拳下来，应该就可以正常使用了，照片也不会被红框包围