在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法_layui上传图片跨域,layui跨域问题 - CSDN文库

196 浏览量更新于2023-03-16 评论收藏 39KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

在在LayUI图片上传中图片上传中,解决由跨域问题引起的请求接口错误的方解决由跨域问题引起的请求接口错误的方

法法

今天小编就为大家分享一篇在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法，具有很好的参考价

值，希望对大家有所帮助。一起跟随小编过来看看吧

在在LayUI图片上传中图片上传中,解决由跨域问题引起的请求接口错误的方法解决由跨域问题引起的请求接口错误的方法

在ssm框架整合中，使用layui作为前端页面，拖拽图片上传，填写接口后，后台能够成功接收到数据，但由于页面资源和后台

访问地址的不一致（即使域名一致但端口不一致）引起跨域问题，导致接收资源后在前端无法接收到后台返回的数据。

前台页面：前台页面：

<html>

<head>

<meta charset="UTF-8">

<title>校园网络打印</title>

<link rel="stylesheet" type="text/css" href="css/layui.css" rel="external nofollow" />

</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\"}";

}

}

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

以上这篇在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法就是小编分享给大家的全部内容了，希望能给大家一

个参考，也希望大家多多支持我们。

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余0页未读，立即下载

评论0

weixin_38694541

粉丝: 12
资源: 927

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈