LayUI图片上传中，由跨域问题引起的请求接口错误

最新推荐文章于 2022-12-30 11:11:37 发布

qq_35880453

最新推荐文章于 2022-12-30 11:11:37 发布

阅读量3.6k

点赞数

分类专栏：应用

本文链接：https://blog.csdn.net/qq_35880453/article/details/86502032

版权

应用专栏收录该内容

9 篇文章 0 订阅

订阅专栏

LayUI图片上传中，由跨域问题引起的请求接口错误

在ssm框架整合中，使用layui作为前端页面，拖拽图片上传，填写接口后，后台能够成功接收到数据，但由于页面资源和后台访问地址的不一致（即使域名一致但端口不一致）引起跨域问题，导致接收资源后在前端无法接收到后台返回的数据。
前台页面：

<html>
	<head>
		<meta charset="UTF-8">
		<title>校园网络打印</title>
		<link rel="stylesheet" type="text/css" href="css/layui.css"/>
	</head>
<body bgcolor="#F0F0FF">
<div class='layui-upload-drag' id='test10'>
<i class='layui-icon'></i>"
<p>点击上传，或将文件拖拽到此处</p>
</div>
</body>
        <script src="layui.all.js" type="text/javascript"></script>
        <script  type="text/javascript">
$(function(){
layui.use('upload', function(){
			  var $ = layui.jquery;
			  upload = layui.upload;
			 //拖拽上传
			  upload.render({
			    elem: '#test10',
			    url: 'http://127.0.0.1:8088/file/picture',
			    choose: function(obj){
			    	alert(11111);
			      },
			    done: function(res){
			    	alert(res.code);
			    }
			  });
});
</script>
</html>

后台代码如下：

@Controller
@RequestMapping("/file")
public class FileController {
	
	@RequestMapping(value="/picture",method= {RequestMethod.POST})
	@ResponseBody
	public String upLoad(MultipartFile file,HttpServletResponse response) {
		response.addHeader("Access-Control-Allow-Origin", "*");//解决跨域问题的方法之一，但有弊端
		System.out.println(file.getName());
		System.out.println(file.getSize());
		return "{\"code\":\"0\",\"msg\":\"1\",\"data\":\"111\"}";
	}
}

解决思路：解决跨域问题的方法适用。