關於WebUploader的跨域請求

引言: 在項目上傳文件根據項目需求使用了 WebUploader , 遇到了跨域,發現上傳始終失敗

 

1: 在跨域上傳時會發現有兩個請求, 一個是OPTIONS, 一個是POST, OPTIONS請求首先發出,向服務器請求是否能夠允許訪問, 如若服務器端允許跨域, 則POST請求發送過去, 如果不被允許直接報500了. 因為有兩個請求 , 你的api接口需要能接收這兩種方式的請求, 如 :

$this->add("/index/save-file", array(
                'controller'    => "index",
                'action'        => "saveFile",
            )
        )->via(["OPTIONS","POST"]);

注 :上述使用的是phalcon的路由, 同理, 其他框架也一樣, 如laravel框架的 any.

 

2: 因為是POST跨域上傳, 那么必然在服務器端要對頭信息進行設置, 在你當前的方法起始處加入:

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: *');
header('Access-Control-Max-Age: 1000');

注: header('Access-Control-Allow-Origin: *')  此設置可能會造成安全的隱患: 你可以這樣, 如: 

header("Access-Control-Allow-Origin: 'http://localhost:7779'");　　　　　　//localhost:7779, 你當前api項目的域名地址

 

3:  設置好header頭信息后, 因為有兩個請求, 第一個OPTIONS你可以"先盡快結束它" ,並返給客戶端一些信息:

if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
            return $this->toSuccess(200,'成功');
   }

 

4: 結束對OPTIONS請求的處理后, 再對POST請求的數據進行接收以及后續行為:

if ($this->request->hasFiles() == false) {
            return $this->toError(500,"未獲取到上傳的文件");
   }

$Files = $this->request->getUploadedFiles();        //獲取文件

......     //后續操作