需求场景
需求:网站有两台服务器,分别作为图片服务器和web服务器,图片服务器地址为img.yuanzw.com,web服务器地址为www.yuanzw,com,需要在web服务器上使用UEditor上传图片,但是上传图片地址为img.yuanzw.com的图片服务器,如何解决?
查找问题关键点
通过FireBug或其他手段,很容易发现UEditor上传图片的组件在dialogs/image文件夹下面,其中image.html是实例化时调用的代码文件,UEditor上传功能使用的是第三方的SWFUpload插件,如果对该插件有问题,可以参考我的博客:http://blog.csdn.net/lusend/article/details/8393211,上传图片组件实例化时有一个Url参数,声明了图片上传时请求的服务器的地址,这里是我们需要修改的地方,查看image.html文件可以发现,实例化是Url参数的值是:url:editor.options.imageUrl,知道这个就好办了,去UEditor的配置文件自定义imageUrl地址就可以了,打开editor_config.js文件,默认数据是这样的,imageUrl:URL+"net/imageUp.ashx"。
尝试解决方案
修改imageUrl参数,指向图片服务器的上传处理程序,我现在的配置是这样的:imageUrl: http://img.yuanzw.com/ueditor1_2_4_0-utf8-net/net/imageUp.ashx,单独请求这个地址,返回的数据如下:{'url':'','title':'','original':'','state':'未知错误'},这说明文件请求到了,再次打开使用编辑器的网页,上传图片,报错了,如下:
通过谷歌浏览器自带的调试工具,查看NetWork项(网页向服务器发起的请求),
这一项请求报错了,再看看Console输出项:
提示为crossdomain.xml文件未找到,那么这个crossdomain.xml文件是干什么的呢?百度一下,你就知道,这是跨域请求的一个配置文件,使用crossdomain.xml让Flash可以跨域传输数据,这个博客也说得非常清楚,可以参考一下:http://blog.csdn.net/zws1987211/article/details/7173216,在图片服务器下放置一个crossdomain.xml文件,内容如下:
- <?xml version="1.0"?>
- <!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd">
- <cross-domain-policy>
- <allow-access-from domain="*.yuanzw.com" />
- <allow-http-request-headers-from domain="*.yuanzw.com" headers="*"/>
- </cross-domain-policy>