从Ueditor跨域上传,总结的一次跨域上传的爬坑经历

项目内其中一个管理后台需要发布文章,需要一个富文本编辑器,经过一番选择后,最终选择了百度的Ueditor。

由于上传的文件是上传到另一台专门存放图片等静态资源的服务器上面的,所以就涉及到了跨域上传。

我实现跨域上传的主要方式是将编辑器的前后端分离,前段直接放到需要用的项目内,接收上传的后端(已做权限验证)放到图片服务器上面。

跨域要添加两个HTTP头:

Access-Control-Allow-Origin: *//允许任意域名发起的跨域请求
Access-Control-Allow-Headers: X-Requested-With,X_Requested_With

开发机器用的是WIN7,、IIS7 在开发机器上面进行的跨域上传一切正常,然后就在IIS6上面进行了调试。

当项目运行在IIS6上面的时候就开始了爬坑经历。

首先遇到的是403.1错误。

后端处理代码是用的“一般处理程序”ashx,默认IIS6不接受OPTIONS请求,所以要为ashx添加允许OPTIONS请求。

一切就绪后,悲剧又发生了。

这次又迎来了500错误。

经过1天的资料查阅都没找到解决方法,最后在火狐上发现了蛛丝马迹:CORS。

HTML5上传的时候就是用的CORS规范,即:在发送真正的上传请求之前会先发送一条OPTIONS请求给服务器,这时候需要服务器响应允许跨域上传的HTTP头,然后中断输出。浏览器接到允许跨域上传的HTTP头后会再次发起真正的上传文件请求(POST)。

根据CORS规范,在后端代码进行OPTIONS响应,然后中断输出就可解决。

文字表达能力不是很好,见谅。

时间: 2024-12-07 00:00:49

从Ueditor跨域上传,总结的一次跨域上传的爬坑经历的相关文章

图片上传oss--先拿server端签名再上传oss,返回id值

目前项目oss阿里云存储图片,图片上传主要步骤是:前端从服务端拿到签名signature,再上传到oss上busket里,上传成功返回图片id (imgId),最后再给server端: 注:官网上有个例子,也有封装的插件一个,可参考使用,[服务端签名直传并设置上传回调](https://help.aliyun.com/document_detail/31927.html?spm=5176.doc31923.2.2.RseG9d):但因技术有限,未使用: 项目使用angularjs开发的,常用方法

PHP 图片上传工具类(支持多文件上传)

====================ImageUploadTool======================== <?php class ImageUploadTool { private $file; //文件信息 private $fileList; //文件列表 private $inputName; //标签名称 private $uploadPath; //上传路径 private $fileMaxSize; //最大尺寸 private $uploadFiles; //上传文件

跨域解决方案二:使用JSONP实现跨域

跨域的实现方式有多种,除了 上篇文章 提到的CORS外,常见的还有JSONP.HTML5.Flash.iframe.xhr2等. 这篇文章对JSONP的跨域原理进行了探索,并将我的心得记录在这里和大家分享. JSONP跨域原理探秘 我们知道,使用 XMLHTTPRequest 对象发送HTTP请求时,会遇到 同源策略 问题,域不同请求会被浏览器拦截. 那么是否有方法能绕过 XMLHTTPRequest 对象进行HTTP跨域请求呢? 换句话说,不使用 XMLHTTPRequest 对象是否可以发送

ajax结合文件上传类进行多文件的单个上传

今天做项目的时候碰见一个问题:之前一个同事离职之前做了一个网站,有一个上传商品详细图片的功能,当时已经完成,但是由于后期程序的有更改以及更改的程序员的水平也是参差不齐,最后导致程序bug很多,由于当时用的是一个框架,最终也没找到说明文档,后来我就重新写了一个结合ajax上传文件的upload.classs.php虽然界面欠缺美观,但是通俗易懂好维护. //首先是页面. index.php <!DOCTYPE html> <html lang="en"> <

使用swfupload上传超过30M文件,使用FLASH上传组件

原文:使用swfupload上传超过30M文件,使用FLASH上传组件 前一段时间会员的上传组件改用FLASH的swfupload来上传,既能很友好的显示上传进度,又能完全满足大文件的上传. 后来服务器升级到windows 2008,改为IIS7后,上传文件一旦超过30M时,就出现404错误,而且是是上传进度达到100%之后,真是让人难思其解. 反复测试,发现FLASH上传文件到并没有正确的执行.NET程序,也就是.NET程序本身有问题; 但小于30M又是一切OK,难道是上传的文件大小有所限制?

Plupload 上传详细讲解,Plupload 多实例上传,Plupload多个上传按钮--推荐使用

今天帮朋友解决  Plupload  上传的问题,查了很多资料,资料还是挺全的,但是有点零零散散的,故整理好,合并发出来. 本教程包括: Plupload  上传详细讲. Plupload  多实例上传. Plupload  多个上传按钮. Plupload  上传成功获取返回值. 我们来看一个比较全的  Plupload  Demo <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

yii2.0下,单图片上传到搜狐云台以及图片上传到本机。

图片服务器接的是搜狐云台.在搜狐云台上有代码包,下载下来,放到yii框架的vendor下. yii2.0导入第三方库,很简单,写个autoload的文件,然后在入口脚本index.php中包含那个autoload文件就好了.具体到这个云台的库,只要包含代码中的autoload文件就好了. 简单介绍下搜狐云台的实现,用户会有一个对应的域名,然后选择建一些bucket,文件的上传下载都是在这个bucket中执行.函数调用在云台提供的文档中介绍的很清楚.这里就不再介绍了.同时我只从php的部分来介绍,

Android将Library上传到jcenter超简单完整步骤以及遇到的各种坑

Android将Library上传到jcenter超简单完整步骤以及遇到的各种坑 在[玩转SQLite系列](七)打造轻量级ORM工具类SQLiteDbUtil操作数据库 中我们可以看到这个工具类的超简洁用法:只需要在gradle中引入: compile 'cn.bluemobi.dylan:sqlitelibrary:0.1' 即可使用,那么这到底是怎么回事?这个是Android项目所在jcenter的一个远程仓库.我们只需要将你的libray上传到jcenter即可,那么如和将一个项目上传到

限制上传大小、用COS实现文件上传与下载 五(63)

一 限制上传大小 1:限制总文件的大小 .    如 上传10文件,设置最多总上传大小为100M. void setSizeMax(long sizeMax)           Sets the maximum allowed size of a complete request, as opposed to setFileSizeMax(long). 2:设置第每一个文件的大小 ,如果设置每 一个文件大小10M.  void setFileSizeMax(long fileSizeMax)