從Ueditor跨域上傳,總結的一次跨域上傳的爬坑經歷

項目內其中一個管理後臺須要發佈文章,須要一個富文本編輯器,通過一番選擇後,最終選擇了百度的Ueditor。php

因爲上傳的文件是上傳到另外一臺專門存放圖片等靜態資源的服務器上面的,因此就涉及到了跨域上傳。後端

我實現跨域上傳的主要方式是將編輯器的先後端分離,前段直接放到須要用的項目內,接收上傳的後端(已作權限驗證)放到圖片服務器上面。跨域

跨域要添加兩個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請求。spa

一切就緒後,悲劇又發生了。調試

此次又迎來了500錯誤。圖片

通過1天的資料查閱都沒找到解決方法,最後在火狐上發現了蛛絲馬跡:CORS。

HTML5上傳的時候就是用的CORS規範,即:在發送真正的上傳請求以前會先發送一條OPTIONS請求給服務器,這時候須要服務器響應容許跨域上傳的HTTP頭,而後中斷輸出。瀏覽器接到容許跨域上傳的HTTP頭後會再次發起真正的上傳文件請求(POST)。

根據CORS規範,在後端代碼進行OPTIONS響應,而後中斷輸出就可解決。

文字表達能力不是很好,見諒。

相關文章
相關標籤/搜索