跨域问题解决
save:1 Access to XMLHttpRequest at 'http://api.yqrb.com.cn:8088/flutter-yqvod-dev-api/manage/film/upload' from origin 'http://admin.yqrb.com.cn' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
app.js:45 POST http://api.yqrb.com.cn:8088/flutter-yqvod-dev-api/manage/film/upload net::ERR_FAILED
@ApiOperation(value = "图片上传", notes = "图片上传", httpMethod = "POST")
@PostMapping("/upload")
public IMOOCJSONResult upload(
@ApiParam(value = "upload_file", required = false)
MultipartFile file,
HttpServletRequest request) {
// if (file == null) {
// return IMOOCJSONResult.ok("上传失败，未选择文件");
// }
String fileName = file.getOriginalFilename();
String newFileName = "";
if (StringUtils.isNotBlank(fileName)) {
//文件重命名 imooc-face.png -> ["imooc-face","png"]
String fileNameArr[] = fileName.split("\\.");
// 获取文件的后缀名
String suffix = fileNameArr[fileNameArr.length - 1];
//文件名称重组
newFileName = UUID.randomUUID() + toString() + "." + suffix;
}
System.out.println("文件名：" + newFileName);
String filePath = "/ftpfile/";
File dest = new File(filePath + newFileName);
Map fileMap = Maps.newHashMap();
try {
file.transferTo(dest);
System.out.println("上传成功！");
String url = Const.HTTP_PREFIX+newFileName;
fileMap.put("uri",newFileName);
fileMap.put("url",url);
} catch (IOException e) {
System.out.println("上传异常！" + e);
return IMOOCJSONResult.errorMessage("文件不能为空");
}
return IMOOCJSONResult.ok(fileMap);
}
前端
<div className="form-group">
<label className="col-md-2 control-label">影片图片</label>
<div className="col-md-10">
{
this.state.subImages.length ? this.state.subImages.map(
(image, index) => (
<div className="img-con" key={index} >
<img className="img" src={image.url}/>
<i className="fa fa-close" index={index} onClick={(e) => this.onImageDelete(e)}></i>
</div>)
) : (<div>请上传图片</div>)
}
</div>
<div className="col-md-offset-2 col-md-10 file-upload-con">
<FileUploader onSuccess={(res) => this.onUploadSuccess(res)}
onError={(errMsg) => this.onUploadError(errMsg)}/>
</div>
正在回答
这个是nginx配置的跨域。建议跟着视频走吧~~哈哈哈?
package com.imooc.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
/**
* @ClassName $ {NAME}
* @Description TODO
* @Author fjw
* @Date 2020/2/5 3:11 PM
* @Version 1.0
**/
@Configuration
public class CorsConfig{
private CorsConfiguration buildConfig() {
CorsConfiguration corsConfiguration = new CorsConfiguration();
corsConfiguration.addAllowedOrigin("*"); // 允许任何域名使用
corsConfiguration.addAllowedHeader("*"); // 允许任何头
corsConfiguration.addAllowedMethod("*"); // 允许任何方法（post、get等）
return corsConfiguration;
}
public CorsConfig() {
}
@Bean
public CorsFilter corsFilter(){
//1. 添加cros配置信息
CorsConfiguration config = new CorsConfiguration();
config.addAllowedOrigin("http://localhost:8080");
config.addAllowedOrigin("http://s.txy.yqrb.com.cn");
config.addAllowedOrigin("http://admin.txy.yqrb.com.cn");
config.addAllowedOrigin("http://www.yqrb.com.cn:8080");
config.addAllowedOrigin("http://admin.yqrb.com.cn:8080");
config.addAllowedOrigin("http://s.yqrb.com.cn:8080");
config.addAllowedOrigin("http://img.yqrb.com.cn:8080");
config.addAllowedOrigin("http://www.yqrb.com.cn");
config.addAllowedOrigin("http://admin.yqrb.com.cn");
config.addAllowedOrigin("http://s.yqrb.com.cn");
config.addAllowedOrigin("http://img.yqrb.com.cn");
//设置是否发送cookie信息
config.setAllowCredentials(true);
//设置允许请求的方式
config.addAllowedMethod("*");
//设置允许的header
config.addAllowedHeader("*");
//2.为url添加映射路径
UrlBasedCorsConfigurationSource corsSource = new UrlBasedCorsConfigurationSource();
corsSource.registerCorsConfiguration("/**",config);
//3.返回重新定义好的corsSource
return new CorsFilter(corsSource);
}
}
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星