当前位置:  开发笔记 > 编程语言 > 正文

跨域图像上传Angular + laravel

如何解决《跨域图像上传Angular+laravel》经验,为你挑选了1个好方法。

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

"对预检请求的响应未通过访问控制检查:请求的资源上没有'Access-Control-Allow-Origin'标头"

Angular Code for file Upload:

 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,但仍显示预检响应失败消息.任何人都可以帮我解决这个问题的进一步调试吗?



1> Muzammil Nas..:

尝试添加:

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

在bootstrap/app.php中您还可以在此处插入访问控制所需的任何其他标头.

推荐阅读
wurtjq
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有