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

?

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

?

后來移至到項目中才發(fā)現(xiàn)，跨域是個很大的問題。圖片服務(wù)器，提供一個接口。當(dāng)時想了兩套解決方案：

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

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

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

? ?

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

修改nginx的代理，失敗。

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

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

后來發(fā)現(xiàn)WebUpload，會先發(fā)送一個OPTIONS的請求，百度了一下才發(fā)現(xiàn)，HTTP協(xié)議不止POST和GET。。 瀏覽器在跨域請求前會發(fā)個options請求來驗證是否跨域，所以后端再處理這個options請求時，要告訴瀏覽器一些信息。其實就是個header信息。 HTTP請求方法并不是只有GET和POST，只是最常用的。據(jù)RFC2616標(biāo)準(zhǔn)（現(xiàn)行的HTTP/1.1）得知，通常有以下8種方法：OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE和CONNECT。OPTIONS方法是用于請求獲得由Request-URI標(biāo)識的資源在請求/響應(yīng)的通信過程中可以使用的功能選項。通過這個方法，客戶端可以在采取具體資源請求之前，決定對該資源采取何種必要措施，或者了解服務(wù)器的性能。

OPTIONS請求方法的主要用途有兩個：

1、獲取服務(wù)器支持的HTTP請求方法；也是黑客經(jīng)常使用的方法。

2、用來檢查服務(wù)器的性能。例如：AJAX進(jìn)行跨域請求時的預(yù)檢，需要向另外一個域名的資源發(fā)送一個HTTP OPTIONS請求頭，用以判斷實際發(fā)送的請求是否安全。

發(fā)現(xiàn)Webupload發(fā)送的OPTIONS請求，雖然阻止，但是，返回的狀態(tài)碼是200，也就是說Nginx是配置正確的，趕緊將Nginx配置改回來。

后來靈光一閃，想起Express的路由好像會控制，接收什么協(xié)議的訪問。然后趕緊嘗試看看，成功了很是興奮。 var router=express.Router(); var file_ctrl = require('../controller/filectrl')/**上傳文件*/ router.options('/upload',file_ctrl.upload); router.post('/upload',file_ctrl.upload);

?

?最后再放兩張圖，成功和失敗 返回的Response Headers信息，確實不同。 基于這個，那不是所有的跨域問題都可以解決了，像網(wǎng)上說的Jsonp，iframe 完全都可以不用了。嘿嘿

?

?

轉(zhuǎn)自 http://www.cnblogs.com/BenAndWang/p/4427253.html

?

轉(zhuǎn)載于:https://www.cnblogs.com/CodeDeath/articles/4429373.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。