跨域图片上传Angular+laravel

Posted

技术标签:

【中文标题】跨域图片上传Angular+laravel【英文标题】:Cross Domain Image upload Angular+laravel 【发布时间】:2016-04-07 10:22:04 【问题描述】:

我一直在努力在服务器上上传图片。我在前端使用ngFileUpload。但我总是得到

“对预检请求的响应未通过访问控制检查:请求的资源上不存在“Access-Control-Allow-Origin”标头”

文件上传的Angular代码:

 var uploadFile = function (file) 
      if (file) 

            if (!file.$error) 
              Upload.upload(
                  url: baseUrl+'upload',
                  file: file


              ).progress(function (evt) 
                  var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
                  //console.log(evt.total);
              ).success(function (data, status, headers, config) 
                  $timeout(function() 

                    console.log(data);
                    console.log(status);
                      if(status==200)
                        

                          logo_path = data.logo_path;

                        

                  );
              );
            

      
  ;

在 Laravel 上,我已经像这样配置了 CORS:

public function handle($request, Closure $next)

    header("Access-Control-Allow-Origin: http://localhost:8001/");

    // ALLOW OPTIONS METHOD
    $headers = [
        'Access-Control-Allow-Methods'=> 'POST, GET, OPTIONS, PUT, DELETE',
        'Access-Control-Allow-Headers'=> 'Content-Type, X-Auth-Token, Origin'
    ];
    if($request->getMethod() == "OPTIONS") 
        // The client-side application can set only headers allowed in Access-Control-Allow-Headers
        return Response::make('OK', 200, $headers);
    

    $response = $next($request);
    foreach($headers as $key => $value)
        $response->header($key, $value);
    return $response;

正常的跨域 POST 请求工作正常。即 $http.post()。我在角度上尝试了许多不同的标题变体,但没有任何帮助。 OPTIONS 请求也返回 200 OK 但仍显示预检响应失败消息。谁能帮我进一步调试这个问题?

【问题讨论】:

将“Access-Control-Allow-Origin”也添加到标题中。 请求标头?我没有帮忙。 【参考方案1】:

尝试添加:

header('Access-Control-Allow-Origin: *'); 
header('Access-Control-Allow-Headers: Origin, Content-Type'); 
header('Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE');

在引导程序/app.php 中 您还可以在此处插入访问控制可能需要的任何其他标题。

【讨论】:

以上是关于跨域图片上传Angular+laravel的主要内容,如果未能解决你的问题,请参考以下文章

php 之跨域上传图片

ie89跨域上传文件(图片)

ueditor富文本编辑器跨域上传图片解决办法

iframe跨域上传图片

上传图片截图预览控件不显示cropper.js 跨域问题

kindedit,uedit 上传跨域返回