Ueditor 跨域上传图片,图片回显不能接收到json数据问题。 30C

问题描述:搭建了俩服务器,一个资源服务器,一个应用服务器,
当使用Ueditor上传功能时,必须将图片上传到资源服务器,也就是远程服务器时,会出现跨域问题,一个应用服务器时用Ueditor上传图片到一个应用中,没有问题,json也可以接收到,但上传到资源服务器时,上传的Controller可以正常执行、返回json数据,但接收不到json数据,导致图片无法回显
使用 document.domain = "http://localhost";会报错,不知如何配置。
菜鸟一枚,请高手指点一二

1.downFile=文件服务器 / tuji=项目目录

(文件服务器地址为:http://localhost:8080 项目目录地址:http://localhost:80)
图片说明
图片说明
.

Ueditor.all.js报错的位置

图片说明

2.jsp页面代码


<%@ page language="java" contentType="text/html; charset=UTF-8"
    import="com.tuji.utils.FileUtil"
    pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %>
<% String contextPath = FileUtil.httpPath; %>
<%--  <% String contextPath = "http://"+request.getServerName()+":"+request.getLocalPort()+request.getContextPath(); %> --%>
<!DOCTYPE html>
    <script type="text/javascript" charset="utf-8" src="<%=contextPath%>/resource/web/common/ueditor/third-party/jquery-1.10.2.js"></script>
    <script type="text/javascript" charset="utf-8" src="<%=contextPath%>/resource/web/common/ueditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="<%=contextPath%>/resource/web/common/ueditor/ueditor.all.js"> </script>
    <script type="text/javascript" charset="utf-8" src="<%=contextPath%>/resource/web/common/ueditor/lang/zh-cn/zh-cn.js"></script>
<script>
    //编辑器资源文件根路径 最好在ueditor.config.js中配置
    window.UEDITOR_HOME_URL = "<%=contextPath%>/";
    //建议使用工厂方法getEditor创建和引用编辑器实例,如果在某个闭包下引用该编辑器,直接调用UE.getEditor('editor')就能拿到相关的实例
    var ue = UE.getEditor('editor',{initialFrameHeight: 500,initialFrameWidth:800,maximumWords:3000,elementPathEnabled:false});
    //复写UEDITOR的getActionUrl 方法,定义自己的Action
    UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
    UE.Editor.prototype.getActionUrl = function(action) {
        if (action == 'uploadimage' || action == 'uploadfile') {
            var id = $('#carInfoId').val();
               return '<%=contextPath %>/file/ueditorUpload';
        } else {
            return this._bkGetActionUrl.call(this, action);
        }
    };
    // 复写UEDITOR的getContentLength方法 解决富文本编辑器中一张图片或者一个文件只能算一个字符的问题,可跟数据库字符的长度配合使用
    UE.Editor.prototype._bkGetContentLength = UE.Editor.prototype.getContentLength;
    UE.Editor.prototype.getContentLength = function(){
        return this.getContent().length;
    }
</script>
<html>
    <head>
        <%@ include file="../../common/common.jsp"%>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="${ctx}/resource/web/sys/sys/sys.css">
        <link rel="stylesheet" type="text/css" href="${ctx}/resource/web/common/css/backstageCommon.css">

<%--         <script type="text/javascript" charset="utf-8" src="${ctx }/resource/web/common/ueditor/ueditor.config.js"></script> --%>
<%--         <script type="text/javascript" charset="utf-8" src="${ctx }/resource/web/common/ueditor/ueditor.all.min.js"> </script> --%>
<!--         建议手动加在语言,避免在ie下有时因为加载语言失败导致编辑器加载失败 -->
<!--         这里加载的语言文件会覆盖你在配置项目里添加的语言类型,比如你在配置项目里配置的是英文,这里加载的中文,那最后就是中文 -->
<%--         <script type="text/javascript" charset="utf-8" src="${ctx }/resource/web/common/ueditor/lang/zh-cn/zh-cn.js"></script> --%>
    </head>
    <body class="bgColor2" style="text-align: center;">
        <div style="width: 20%;margin: 0 auto;margin-top: 10%;">
            <form id="saveForm" action="${ctx }/sys/opus/saveContent" method="post">
                <input type="hidden" name="id" value="${opus.id }">
                <input type="button" id="close" class='bgColor2 borderColor2 fontColor1 btn alertBtn pageBtn' style='margin: 0 auto;font-size:12px;margin-bottom: 80px;' value="关&nbsp;闭">
                <input type="button" id="saveContent" class='bgColor2 borderColor2 fontColor1 btn alertBtn pageBtn' style='margin: 0 auto;font-size:12px;margin-bottom: 80px;' value="保&nbsp;存">
                <br/>
                <div style="color: white;margin-bottom: 30px;">${opus.name }</div>
                <script name="content" id="editor" type="text/plain">
                    ${opus.content }
                </script>
            </form>
        </div>
        <%@ include file="../../common/upload.jsp"%>
    </body>

    <!-- 富文本编辑器 -->
    <script type="text/javascript">

//  document.domain = "http://localhost:8080";

    $("#close").click(function() {
        window.close();
    });
    var isFirst = true;
    $("#saveContent").click(function() {
        if(!isFirst){
            return;
        }
        $("#saveForm").submit();
        return;
        $.ajax({
            type: "POST",
            url: "${ctx}/sys/opus/saveContent",
            data:{
                "id" : '${opus.id}',
                "content" : $("#editor").val()
            },
            dataType : "json",
            success: function(data) {
                if(data.result == 0){
                    alert("保存成功!")
                }else{
                    alert(data.msg);
                }
            }
        });
    });
    $(".pageBtn").hover(function() {
        $(this).removeClass("bgColor2");
        $(this).addClass("bgColor1");

        $(this).removeClass("fontColor1");
        $(this).addClass("fontColor3");

        $(this).css("transition", "all 0.25s ease");
    }, function() {
        $(this).removeClass("bgColor1");
        $(this).addClass("bgColor2");

        $(this).removeClass("fontColor3");
        $(this).addClass("fontColor1");

        $(this).css("transition", "all 0.5s ease");
    });


    </script>
    </html>






**3.接收Ueditor上传的Conroller**
/**
     * Ueditor 文件上传Action
     * @param req 
     * @return UEDITOR 需要的json格式数据
     */
    @CrossOrigin
    @RequestMapping(value="ueditorUpload",method = RequestMethod.POST, produces = MediaType.APPLICATION_JSON_VALUE)
    @ResponseBody
    public Map<String,Object> upload(HttpServletRequest request){
        Map<String,Object> result = new HashMap<String, Object>();

        MultipartHttpServletRequest mReq  =  null;
        MultipartFile file = null;
        InputStream is = null ;
        String fileName = "";

        try {
            mReq = (MultipartHttpServletRequest)request;
            // 从config.json中取得上传文件的ID
            file = mReq.getFile("upfile");
            // 原始文件名   UEDITOR创建页面元素时的alt和title属性
            String originalFileName = file.getOriginalFilename();
            String filePath = "";
            if (!file.isEmpty()) {
                try {
                    String newName = UUID.randomUUID().toString()
                            + file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf("."));
                    String path = FileUtil.getUeditorDownPath();
                    FileUtil.uploadFile(request, new BufferedInputStream(file.getInputStream()), path + newName);
                    filePath = path + newName;
                    Long fileSize = file.getSize();
                    SysFile sysFile = new SysFile();
                    sysFile.setPath(filePath);
                    sysFile.setSize(fileSize + "");
                    sysFile.setName(originalFileName);
                    sysFileServiceI.saveOrUpdate(sysFile);
                    result.put("state", "SUCCESS");// UEDITOR的规则:不为SUCCESS则显示state的内容
                    result.put("url", FileUtil.getHttpPath() + filePath);
                    result.put("title", originalFileName);
                    result.put("original", originalFileName);
                } catch (IOException e) {
                    e.printStackTrace();
                    result.put("success", false);
                    result.put("msg", "服务器异常,请联系管理员!");
                }
                return result;
            } else {
                result.put("success", false);
                result.put("msg", "文件内容为空!");
                return result;
            }

        }
        catch (Exception e) {
            System.out.println(e.getMessage());
            result.put("state", "文件上传失败!");
            result.put("url","");
            result.put("title", "");
            result.put("original", "");
            System.out.println("文件 "+fileName+" 上传失败!");
        }

        return result;
    }

1个回答

前几天用ajax做了个跨域的,,
跨域相应的话需要,在响应头中加入:(据说可能造成安全问题)

respons.setHeader("Access-Control-Allow-Origin", "*");

你先试试,,有问题还可以追问,,能帮到你请采纳。^.^

akoall
akoall 我这里可以访问到上传的Controller的,并且设置了@CrossOrigin允许跨域访问,主要是返回时Ueditor无法获得json,
2 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
如何把ueditor上传的图片视频等信息写入自己的数据库?
-
UEditor java自定义图片上传问题,上传成功图片显示路径是loading
-
ueditor按ftp前缀跨域上传返回路径给编辑器时如何改成http前缀
-
springboot+ueditor已经实现图片上传并回显,但是上传附件出错
-
php项目中,ueditor上传图片后图片路径如何获取并保持到数据库中?
-
百度的UEditor上传图片,如何上传到静态服务器上?
-
急,求大神帮帮,弄好多天了,ssm使用ueditor自定义上传图片时图片不能回显在编辑器上
-
ueditor富文本编辑器如何把图片回显的路径改成自己上传图片文件真实的路径
-
ueditor自定义上传服务器响应没错但是却不回显图片是怎么回事
-
springboot整合百度Ueditor,图片上传成功,回显时,自动添加http://localhost
-
如何把后台返回的json数据赋给ueditor
-
请教:有知道UEditor编辑器上传图片的功能吗?
-
百度UEditor编辑器上传图片时不调用controller方法
-
ueditor上传图片后台配置无法加载问题
-
Ueditor的图片自定义及回显??
-
UEditor上传图片报 errorHandler is not defined
-
Ueditor 不显示急急急,
-
把带图片的邮箱正文复制到ueditor编辑器里,编辑器里图片显示,前台页面不显示
-
Ueditor项目部署后上传图片出现错误
-
程序员竟然钟爱这个!我 low了
今天和一帮程序员大佬群里闲聊(需要入群的可以加最底下微信哦~)聊着聊着竟然扯到鞋子一直在讨论穿什么鞋子比较耐脏然后一帮大佬集中围殴小白鞋说小白鞋虽然百搭但是太容易脏,太不...
程序员实用工具网站
目录 1、搜索引擎 2、PPT 3、图片操作 4、文件共享 5、应届生招聘 6、程序员面试题库 7、办公、开发软件 8、高清图片、视频素材网站 9、项目开源 10、算法 11、在线工具宝典大全 程序员开发需要具备良好的信息检索能力,为了备忘(收藏夹真是满了),将开发过程中常用的网站进行整理。 1、搜索引擎 1.1、秘迹搜索 一款无敌有良心、无敌安全的搜索引擎,不会收...
996下的程序员,该如何保证自己的身体健康?
作者:陈大鱼头github:KRISACHAN自从开始写代码之后,一天里大部分的时间都贡献了给了电脑跟那张从X总办公室里搬回来的人体工学椅了。鱼头也经历过无数次的 肥胖 ...
史上最详细的IDEA优雅整合Maven+SSM框架(详细思路+附带源码)
网上很多整合SSM博客文章并不能让初探ssm的同学思路完全的清晰,可以试着关掉整合教程,摇两下头骨,哈一大口气,就在万事具备的时候,开整,这个时候你可能思路全无 ~中招了咩~ ,还有一些同学依旧在使用eclipse或者Myeclipse开发,我想对这些朋友说IDEA 的编译速度很快,人生苦短,来不及解释了,直接上手idea吧。这篇文章每一步搭建过程都测试过了,应该不会有什么差错。本文章还有个比较优秀的特点,就是idea的使用,基本上关于idea的操作都算是比较详细的,所以不用太担心不会撸idea!最后,本文
全球最厉害的 14 位程序员!
来源 | ITWorld 整理自网络全球最厉害的 14 位程序员是谁?今天就让我们一起来了解一下吧,排名不分先后。01. Jon Skeet个人名望:程序技术问答网站 S...
我花了一夜用数据结构给女朋友写个H5走迷宫游戏
起因 又到深夜了,我按照以往在csdn和公众号写着数据结构!这占用了我大量的时间!我的超越妹妹严重缺乏陪伴而 怨气满满! 而女朋友时常埋怨,认为数据结构这么抽象难懂的东西没啥作用,常会问道:天天写这玩意,有啥作用。而我答道:能干事情多了,比如写个迷宫小游戏啥的! 当我码完字准备睡觉时:写不好别睡觉! 分析 如果用数据结构与算法造出东西来呢? ...
招人!入职阿里仅1年,我和做AI的程序员薪资翻了2倍!
最近在知乎上,关于AI的这个话题又被顶起来,其中,这条回答让人印象深刻:在这短短的一条信息里,无疑显示出:AI行业缺人,高端岗位80万年薪恐怕也招不来!小编上周在一个AI...
什么是大公司病(太形象了)
点击蓝色“五分钟学算法”关注我哟加个“星标”,天天中午 12:15,一起学算法作者 | 南之鱼来源 | 芝麻观点(chinamkt)所谓大企业病,一般都具有机构臃肿、多重...
让程序员崩溃的瞬间(非程序员勿入)
今天给大家带来点快乐,程序员才能看懂。 来源:https://zhuanlan.zhihu.com/p/47066521 1. 公司实习生找 Bug 2.在调试时,将断点设置在错误的位置 3.当我有一个很棒的调试想法时 4.偶然间看到自己多年前写的代码 5.当我第一次启动我的单元测试时 ...
Spring高级技术梳理
Spring高级技术梳理 序言正文SpringDate部分Spring全家桶之SpringData——预科阶段Spring全家桶之SpringData——Spring 整合Hibernate与Hibernate JpaSpring全家桶之SpringData——Spring Data JPASpring全家桶之SpringData——SpringData RedisSpringBoot部分Sp...
Git 天天用 但是 Git 原理你了解吗?
Git 原理 做技术一定要知其然知其所以然,意思就是:知道它是这样的,更知道它为什么是这样的。我主要通过4块内容来简单介绍 Git 是原理是什么样的。这4块内容如下: Git 存储目录结构介绍 Git 是如何存储的 Git 的对象 Git引用 当然 Git 原理不仅仅包含这些,想要更深入了解请查看官方教程 https://git-scm.com/book/zh/v2/。 本文内容是我在 Git...
Android——微信自动回复实现
首先本文的测试微信版本是7.0.3 ,亲测可以使用。 需要实现-抓取微信自动回复消息的功能点。 一.首先打开DDMS,使用按钮。 在微信中回复一个消息 点击Stop Method Profiling。 二.查看生成的报表,观察到如下两个方法 其中1应该是发送消息的接口方法。2应该是UI层显示的方法。 三.首先分析第一个方法: 1.,可以看到,参数值是String,返...
分享靠写代码赚钱的一些门路
作者 mezod,译者 josephchang10如今,通过自己的代码去赚钱变得越来越简单,不过对很多人来说依然还是很难,因为他们不知道有哪些门路。今天给大家分享一个精彩...
对计算机专业来说学历真的重要吗?
我本科学校是渣渣二本,研究生学校是985,现在毕业五年,校招笔试、面试,社招面试参加了两年了,就我个人的经历来说下这个问题。 这篇文章很长,但绝对是精华,相信我,读完以后,你会知道学历不好的解决方案,记得帮我点赞哦。 先说结论,无论赞不赞同,它本质就是这样:对于技术类工作而言,学历五年以内非常重要,但有办法弥补。五年以后,不重要。 目录: 张雪峰讲述的事实 我看到的事实 为什么会这样 ...
技术人员要拿百万年薪,必须要经历这9个段位
很多人都问,技术人员如何成长,每个阶段又是怎样的,如何才能走出当前的迷茫,实现自我的突破。所以我结合我自己10多年的从业经验,总结了技术人员成长的9个段位,希望对大家的职...
8000字干货:那些很厉害的人是怎么构建知识体系的
本文约8000字,正常阅读需要15~20分钟。读完本文可以获得如下收益: 分辨知识和知识体系的差别 理解如何用八大问发现知识的连接点; 掌握致用类知识体系的构建方法; 能够应用甜蜜区模型找到特定领域来构建知识体系。 1. 知识体系?有必要吗? 小张准备通过跑步锻炼身体,可因为之前听说过小腿变粗、膝盖受伤、猝死等等与跑步有关的意外状况,有点担心自己会掉进各种坑里,就在微信上问朋友圈一直晒跑步...
万字长文!线性代数的本质课程笔记完整合集
点击上方“Datawhale”,选择“星标”公众号第一时间获取价值内容系列目录1.向量究竟是什么https://www.bilibili.com/video/av5987...
Java 网络爬虫,就是这么的简单
这是 Java 网络爬虫系列文章的第一篇,如果你还不知道 Java 网络爬虫系列文章,请参看 学 Java 网络爬虫,需要哪些基础知识。第一篇是关于 Java 网络爬虫入门内容,在该篇中我们以采集虎扑列表新闻的新闻标题和详情页为例,需要提取的内容如下图所示: 我们需要提取图中圈出来的文字及其对应的链接,在提取的过程中,我们会使用两种方式来提取,一种是 Jsoup 的方式,另一种是 httpcli...
nginx学习,看这一篇就够了:下载、安装。使用:正向代理、反向代理、负载均衡。常用命令和配置文件
文章目录前言一、nginx简介1. 什么是 nginx 和可以做什么事情2.Nginx 作为 web 服务器3. 正向代理4. 反向代理5. 动静分离6.动静分离二、Nginx 的安装三、 Nginx 的常用命令和配置文件四、 Nginx 配置实例 1 反向代理五、 Nginx 配置实例 2 负载均衡六、 Nginx 配置实例 3 动静分离七、 Nginx 的高可用集群 前言 一、nginx简介...
Java 爬虫遇上数据异步加载,试试这两种办法!
这是 Java 爬虫系列博文的第三篇,在上一篇 Java 爬虫遇到需要登录的网站,该怎么办? 中,我们简单的讲解了爬虫时遇到登录问题的解决办法,在这篇文章中我们一起来聊一聊爬虫时遇到数据异步加载的问题,这也是爬虫中常见的问题。 现在很多都是前后端分离项目,这会使得数据异步加载问题更加突出,所以你在爬虫时遇到这类问题不必惊讶,不必慌张。对于这类问题的解决办法总体来说有以下两种: 1、内置一个浏览器内...
Angular 入门教程系列:39:使用ng-alain进行开发
在前面的文章中介绍过ng-alain,当时在使用的时候还显得不是很方便,最简单的一个demo运行的都不是非常流畅。而目前的版本已经做有较大的改进,再这个基础上进行二次开发,尤其是一些后端的平台或者监控的平台看起来都比较不错。在这篇文章中继续来确认一下使用的感受。
相关热词 c#部署端口监听项目、 c#接口中的属性使用方法 c# 昨天 c#func链接匿名方法 c#怎么创建文件夹 c#从键盘接收空格 c#da/ad c#部门请假管理系统 c#服务器socket c# 默认的访问修饰符