在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)

相关推荐

  • 浅谈layui框架自带分页和表格重载的接口解析问题

    首先要了解框架分页自带的参数有哪些,特别是注意参数名称要和后台一致! **需要注意的是layui框架的数据解析格式问题,data必须是个数组对象的形式才能正常解析否则会很麻烦(亲测过非正常解析,手写js手动动态添加表格) data 格式例如: { "count": 11, "code": 0, "msg": "", "data": [ { "id": "1", &qu

  • layui 富文本图片上传接口与普通按钮 文件上传接口的例子

    富文本-图片上传 html: <div class="layui-form-item layui-form-text"> <div class="layui-input-block"> <!--<textarea id="L_content" name="contents" required lay-verify="required" placeholder="

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

    在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法 在ssm框架整合中,使用layui作为前端页面,拖拽图片上传,填写接口后,后台能够成功接收到数据,但由于页面资源和后台访问地址的不一致(即使域名一致但端口不一致)引起跨域问题,导致接收资源后在前端无法接收到后台返回的数据. 前台页面: <html> <head> <meta charset="UTF-8"> <title>校园网络打印</title> <li

  • 微信JSSDK多图片上传并且解决IOS系统上传一直加载的问题

    微信多图片上传必须挨个上传,也就是不能并行,得串行: 那么我们可以定义一个如下所示的上传函数: var serverIds = []; function uploadImages(localImagesIds) { if (localImagesIds.length === 0) { $.showPreloader('正在提交数据...'); $('form').submit(); } wx.uploadImage({ localId: localImagesIds[0], // 需要上传的图片

  • layui 图片上传+表单提交+ Spring MVC的实例

    Layui 的上传是最常用的, 不可或缺, 记录一下代码, 以后复制都能用!! 1.前端HTML: <div class="layui-form-item"> <label class="layui-form-label">修改头像</label> <div class="layui-input-inline uploadHeadImage"> <div class="layui-u

  • 详解angularJS+Ionic移动端图片上传的解决办法

    详解angularJS+Ionic移动端图片上传的解决办法

    前端开发中经常会碰到图片上传的问题,网上的解决办法很多,可是有些图片上传的插件会有一些附属的插件,因此因为一个图片上传的问题可能额需要引入其他插件到项目中,久而久之项目会不伦不类,有时候插件之间也会有一些冲突,所以我们可以自己写一个图片上传的方法. 今天的demo是帮朋友做的一个移动端微信公众号项目,项目架构采用angular+ionic,因为对dom的操作jQuery会方便很多,但是jQuery比较厚重,所以最后选择用轻量级的zepto来对项目dom进行操作. 项目中有一个需求是上传个人作品,

  • 独立图片服务器的图片上传的解决方式

    像一些大的网站,就将图片.CSS.JS.数据库都需要分开到不同的服务器上,为这些不同的服务器单独一个域名.这样不仅提高的访问速度,而且一台服务器坏了,不影响整个网站的打开. 这里介绍一下这样的网站架构中图片上传原理. 先将图片服务器映射到web服务器上(映射的方法就不在这里介绍了),然后在IIS中建个虚拟目录,先指向一个本机文件夹,然后完成.然后在右击新建的虚拟目录,属性.然后在弹出的对话框中选择"另一台计算机上的共享",然后在下面输入服务器和共享名,就行了. 上传图片的程序上就不需要

  • js图片上传中file、bolb、base64图片之间的相互转化

    JS上传图片 我们要清楚,图片的展示方式有三种:分别为file(文件流).bolb(本地流).base64(二进制流) file File 接口提供有关文件的信息,并允许网页中的 JavaScript 访问其内容. 通常情况下, File 对象是来自用户在一个 元素上选择文件后返回的 FileList 对象,也可以是来自由拖放操作生成的 DataTransfer 对象,或者来自 HTMLCanvasElement 上的 mozGetAsFile() API.在Gecko中,特权代码可以创建代表任

  • layui实现多图片上传并限制上传的图片数量

    废话不多说了,直接上代码吧! //给图片添加删除 function mouseChange() { $(document).on("mouseenter mouseleave", ".file-iteme", function (event) { if (event.type === "mouseenter") { //鼠标悬浮 $(this).children(".info").fadeIn("fast"

  • tp5使用layui实现多个图片上传(带附件选择)的方法实例

    tp5使用layui实现多个图片上传(带附件选择)的方法实例

    tp5使用layui实现多个图片上传(带附件选择),如何加载layui在此不详细说明,有需要可以百度 html代码,主要处理都是在jq中,完成方法全部原创,也许不是最简单的,但也能实现效果 {include file="public/header" /} <body> <div class="x-nav"> <span class="layui-breadcrumb"> <a href="&qu

  • vue-quill-editor实现图片上传功能

    问题描述   项目使用的vue2.0开发,项目中需要一个富文本编辑器,楼主经过一番心理挣扎选择了vue-quill-editor.具体如何引用作者在项目中已经写得很明白了,我在这里就不再赘述.   vue-quill-editor插入图片的方式是将图片转为base64再放入内容中,这样就会产生一个问题,如果图片比较大的话,富文本的内容就会很大,楼主是将内容存在数据库中的,这样一来,一方面会占用大量的数据库存储空间,另一方面当图片太大的时候富文本的内容,会超过数据库的存储上限,从而会产生内容被截断

  • 利用node+koa+axios实现图片上传和回显功能

    利用node+koa+axios实现图片上传和回显功能

    目录 前言 开发前需要掌握的一些库 代码结构 实现代码 前言 代码地址 开发前需要掌握的一些库 koa:用来起一个web服务器 koa2-cors: 解决跨域问题 @koa/router: koa的路由处理 koa-body: koa参数的获取 koa-static: 静态内容 @koa/multer multer:图片上传的插件 代码结构 实现代码 1.第一步:用koa+koa-router搭建一个简单的web服务 //main.js const Koa = require('koa') //

随机推荐