关于这个跨域上传图片的问题,其实去年底的时候就该去实现的,因为老板朝三暮四,一会儿让做这个,一会儿看那个,就耽误了。因为这个过程花费了我整整一天的时间,我认为有必要记录下来。

首先,项目是一个ERP,针对的是公司的一个小型电商的网站。项目经理让我搭建一个图片服务器, 当时也是为了完(尝)成(尝)任(新)务(鲜),用的都是当时从没接触过的。通过百度就选择了 Nginx + Nodejs + express + ImageMagick 来实现的。 当时还简单看了一下淘宝的TFS(Taobao FileSystem)太高大上了,因为预估网站图片不会非常多,就用系统自带的文件系统。  Nodejs也是边学边写,可是调试express  这种MVC的时候,就不管用了。。。试了很久也不行。。。   就采用边看api 边打印出来调试。总算可以上传,下载浏览图片了。

后来移至到项目中才发现,跨域是个很大的问题。图片服务器,提供一个接口。当时想了两套解决方案:

  1. 先上传到项目中,然后再编写一个windows服务,来定时把上传的图片传到图片服务器中;
  2. 在图片服务器上写一个页面,然后通过iframe嵌套在项目中。

第二个解决方案直接被项目经理否决了,我也觉得写那么多东西不太好,也不想写这么多东西,只想一步到位。然后就花了一天的时间,查资料,实验。 当时可选的上传的控件有三个,原先项目里面的ajaxSubmit,领导推荐的plupload,我自己查到百度的webupload。 最后我当然选择使用我自己查到的了。 根据官方给出的api,demo来尝试写。  看到demo里面写的是server地址是以http开头的,不是项目中的相对路径。就以为是天然可以跨域,后来找到github上面issues里面,提到这个没有采用jquery file upload 的form post的形式,但是不采用这个可以实现文件修改的,也就实现上传前压缩,和分块上传这些功能的。

然后为了跨域我做了这些尝试:

  1. 修改nginx的代理,失败。
  2. 修改nodejs的express里app.js,在response的消息头部加上下面这段代码, 失败。
  3. 后来我想,只需要在条用上传的方法的头部加上,后来使用chrome插件postman,模拟调用,发现POST可以接受到,POST跨域成功。
  4. 后来发现WebUpload,会先发送一个OPTIONS的请求,百度了一下才发现,HTTP协议不止POST和GET。。
    浏览器在跨域请求前会发个options请求来验证是否跨域,所以后端再处理这个options请求时,要告诉浏览器一些信息。其实就是个header信息。

    HTTP请求方法并不是只有GET和POST,只是最常用的。据RFC2616标准(现行的HTTP/1.1)得知,通常有以下8种方法:OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE和CONNECT。OPTIONS方法是用于请求获得由Request-URI标识的资源在请求/响应的通信过程中可以使用的功能选项。通过这个方法,客户端可以在采取具体资源请求之前,决定对该资源采取何种必要措施,或者了解服务器的性能。
    

    OPTIONS请求方法的主要用途有两个:

    1、获取服务器支持的HTTP请求方法;也是黑客经常使用的方法。

    2、用来检查服务器的性能。例如:AJAX进行跨域请求时的预检,需要向另外一个域名的资源发送一个HTTP OPTIONS请求头,用以判断实际发送的请求是否安全。

  5. 发现Webupload发送的OPTIONS请求,虽然阻止,但是,返回的状态码是200,也就是说Nginx是配置正确的,赶紧将Nginx配置改回来。
  6. 后来灵光一闪,想起Express的路由好像会控制,接收什么协议的访问。然后赶紧尝试看看,成功了很是兴奋。
    var router=express.Router();
    var file_ctrl = require('../controller/filectrl')/**上传文件*/
    router.options('/upload',file_ctrl.upload);
    router.post('/upload',file_ctrl.upload);

最后再放两张图,成功和失败 返回的Response Headers信息,确实不同。 基于这个,那不是所有的跨域问题都可以解决了,像网上说的Jsonp,iframe 完全都可以不用了。嘿嘿

转自   http://www.cnblogs.com/BenAndWang/p/4427253.html

转载于:https://www.cnblogs.com/CodeDeath/articles/4429373.html

跨域上传图片的尝试过程,最终成功了--- 转载相关推荐

  1. java ajax传输图片_Java使用Ajax实现跨域上传图片功能

    说明 : 图片服务器是用Nginx搭建的,用的是PHP语言 这个功能 需要 用到两个js文件: jquery.js和jQuery.form.js function submitImgSize1Uplo ...

  2. java 跨域上传,Java如何利用Ajax完成跨域上传图片的功能介绍

    这篇文章主要介绍了Java使用Ajax实现跨域上传图片功能,需要的朋友可以参考下 说明 : 图片服务器是用Nginx搭建的,用的是PHP语言 这个功能 需要 用到两个js文件: jquery.js和j ...

  3. SpringMVC跨域上传图片出现的405错误及409错误解决方式

    第一步,创建两个web项目,创建项目如下所示: 其中fileupload_server用作图片服务器使用,day1021_springmvc用作上传图片的web项目使用. 第二步,分别将两个项目发布两 ...

  4. php图片上传怎么跨域,ajax跨域上传图片(后端php)完整例子

    1.html内容: 上传截图: 成功文件: 2.js代码: function uploadImage(){ //获取图片 var file = $('#uploadFile')[0].files[0] ...

  5. ueditor跨域上传图片文件(基于jsp框架、tomcat)

    额,好久没有用到ueditor了,因为现在的相关工作很少涉及到富文本编辑:最近临时带了一个项目,里面要用到富文本编辑器,而且文件要统一上传到文件服务器上保存:应为以前用过ueditor就试着在网上着一 ...

  6. ajax请求头cookies中传递sid,跨域请求单点登录,登录成功,但是在controller中获取的cookie与浏览器中不一致,请大神指点一二。^_^...

    跨域请求js代码: $.ajax({ type:"post", async:false, contentType : "application/x-www-form-ur ...

  7. axios请求跨域前端解决_Vue-创建axios实例并实现跨域请求(完整过程-前端)

    Vue-创建axios实例并实现跨域请求 .env配置文件 VUE_APP_BASE_API=/server request.js import axios from 'axios' const te ...

  8. php vue 跨域请求数据6,Vue跨域请求问题解决方案过程解析

    查看页面响应信息,提示跨域有问题 #### 二.解决上面跨域问题:根目录写入以下vue.config.js // vue.config.js module.exports = { devServer: ...

  9. html 图片上传跨域,html5 ajax 跨域上传图片

    html: js: // 读取地址 function readURL(input, tmpimg) { if (input.files && input.files[0]) { var ...

最新文章

  1. 【linux】SELinux工具:semanage的安装和使用
  2. 书籍:Python机器学习蓝图第2版 Python Machine Learning Blueprints 2nd - 2019.pdf
  3. 使用std::cout不能输出显示
  4. 笨方法python3_“笨方法”学Python3,习题 34 。
  5. [MEGA DEAL]完整的Java捆绑包(96%折扣)
  6. VMware安装Centos7后有线线缆被拔出
  7. Mysql中bigint、int、mediumint、smallint 和 tinyint的取值范围
  8. HTML表单input里面的value的作用
  9. shell实现自动部署两台tomcat项目Ⅱ
  10. 这篇文章,自带背景音乐。因为它来自1993年!
  11. 台式计算机总是重启,电脑为什么老是自动重启?我的电脑经常自动重启!!
  12. 自己搭建虚拟服务器,如何自己搭建虚拟主机
  13. python输入个人所得税计算_个人所得税编程python
  14. 个人第1次作业:阅读与准备作业
  15. Linux系统引导过程及排除启动故障
  16. java找出字符串出现最多的字符,JAVA_找出输入的字符串中出现次数最多的字符
  17. 报错#vue-router#unknown custom element: <router-link> - did you register the component correctly?
  18. 李建忠设计模式(二)
  19. ext2.2全选反选修复
  20. c++ 把类型作为参数

热门文章

  1. 农村信用社计算机基础知识,2014年云南省农村信用社考试计算机基础知识练习题...
  2. python异常捕获_Python-异常捕捉
  3. createprocess 系统找不到指定的文件_windows找不到gpedit.msc请确定文件名
  4. just函数python_提升 Python 性能 Numba 与 Cython
  5. 混合式app php怎么打包,如何实现混合 App Web 资源的打包与增量更新
  6. java axis2小实例_java webservice axis2简单开发实例
  7. python 卡方检验 特征选择_结合Scikit-learn介绍几种常用的特征选择方法
  8. %matplotlib inline 的作用
  9. 深入理解javascript原型和闭包(12)——简介【作用域】
  10. 年薪 50w 难吗?分享我的 2 个捷径