Cross Domain Image upload Angular+laravel

Question

I have been struggling with image upload on server. I am using ngFileUpload on front end. But I always get

"Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource"

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;

                        }

                  });
              });
            }

      }
  };

On Laravel i have configured CORS like this :

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;
}

The Normal cross domain POST request works fine. i.e $http.post(). I have tried many different variations of headers on angular but none helps. Also the OPTIONS request returns 200 OK but still preflight response failure message is displayed. Can anyone help me with how to further debug this issue?

Add 'Access-Control-Allow-Origin' to the headers too.

danial
– danial

2016-01-03 21:07:46 +00:00
Commented Jan 3, 2016 at 21:07 — danial
– danial, Commented Jan 3, 2016 at 21:07
To request headers? I didn't help.

Sohaib Farooqi
– Sohaib Farooqi

2016-01-04 05:33:41 +00:00
Commented Jan 4, 2016 at 5:33 — Sohaib Farooqi
– Sohaib Farooqi, Commented Jan 4, 2016 at 5:33

Muzammil Naseer · Accepted Answer · 2016-05-31 11:53:12Z

8

Try adding:

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

in bootstrap/app.php You may also insert any other header you may need for access control here.

answered May 31, 2016 at 11:53

Muzammil Naseer

1,1411 gold badge12 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Cross Domain Image upload Angular+laravel

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related