關于這個跨域上傳圖片的問題，其實去年底的時候就該去實現的，因為老板朝三暮四，一會兒讓做這個，一會兒看那個，就耽誤了。因為這個過程花費了我整整一天的時間，我認為有必要記錄下來。

?

首先，項目是一個ERP，針對的是公司的一個小型電商的網站。項目經理讓我搭建一個圖片服務器，?當時也是為了完（嘗）成（嘗）任（新）務（鮮），用的都是當時從沒接觸過的。通過百度就選擇了?Nginx + Nodejs +?express +?ImageMagick?來實現的。 當時還簡單看了一下淘寶的TFS（Taobao FileSystem）太高大上了，因為預估網站圖片不會非常多，就用系統自帶的文件系統。 ?Nodejs也是邊學邊寫，可是調試express ?這種MVC的時候，就不管用了。。。試了很久也不行。。。 ? 就采用邊看api 邊打印出來調試。總算可以上傳，下載瀏覽圖片了。

?

后來移至到項目中才發現，跨域是個很大的問題。圖片服務器，提供一個接口。當時想了兩套解決方案：

先上傳到項目中，然后再編寫一個windows服務，來定時把上傳的圖片傳到圖片服務器中；

在圖片服務器上寫一個頁面，然后通過iframe嵌套在項目中。

第二個解決方案直接被項目經理否決了，我也覺得寫那么多東西不太好，也不想寫這么多東西，只想一步到位。然后就花了一天的時間，查資料，實驗。 當時可選的上傳的控件有三個，原先項目里面的ajaxSubmit，領導推薦的plupload，我自己查到百度的webupload。 最后我當然選擇使用我自己查到的了。 根據官方給出的api，demo來嘗試寫。 ?看到demo里面寫的是server地址是以http開頭的，不是項目中的相對路徑。就以為是天然可以跨域，后來找到github上面issues里面，提到這個沒有采用jquery file upload 的form post的形式，但是不采用這個可以實現文件修改的，也就實現上傳前壓縮，和分塊上傳這些功能的。

? ?

然后為了跨域我做了這些嘗試：

修改nginx的代理，失敗。

修改nodejs的express里app.js，在response的消息頭部加上下面這段代碼， 失敗。

后來我想，只需要在條用上傳的方法的頭部加上，后來使用chrome插件postman，模擬調用，發現POST可以接受到，POST跨域成功。

后來發現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請求頭，用以判斷實際發送的請求是否安全。

發現Webupload發送的OPTIONS請求，雖然阻止，但是，返回的狀態碼是200，也就是說Nginx是配置正確的，趕緊將Nginx配置改回來。

后來靈光一閃，想起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

總結

以上是生活随笔為你收集整理的跨域上传图片的尝试过程，最终成功了--- 转载的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。