关于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();        //获取文件

......     //后续操作