Sohaib Farooqi Sohaib Farooqi - 1 year ago 307
AngularJS Question

Cross Domain Image upload Angular+laravel

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) {
url: baseUrl+'upload',
file: file

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


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/");

$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 $ 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?

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download