跨域上傳圖片的嘗試過程，最終成功了。哈哈

關於這個跨域上傳圖片的問題，其實去年末的時候就該去實現的，由於老闆朝秦暮楚，一下子讓作這個，一下子看那個，就耽誤了。由於這個過程花費了我整整一天的時間，我認爲有必要記錄下來。

 

首先，項目是一個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請求方法的主要用途有兩個：

   一、獲取服務器支持的HTTP請求方法；也是黑客常用的方法。

   二、用來檢查服務器的性能。例如：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 徹底均可以不用了。嘿嘿