Problem with CORS using Ionic and Lumen

1

I'm developing an app with Ionic and using Lumen in the backend API. I'm having problems with 'CORS', I already configured the server (both using the internal PHP server and Apache, and the same error occurs in both) creating a middleware for CORS that adds the options to the header as it did not work I disabled this middleware and I installed the middleware available in this project barryvdh / laravel-cors I configured it to run conitnua presenting error making the call to the API through the ionic app. If you do a test using Postman the test is performed normally and you can see that the headers of the header appear as they should. I made several searches and all refer the CORS configuration in the headers of the responses that the server sends. I really do not have any idea where the problem might be. Below are the codes and image of the errors.

ThemiddlewarecodeIcreatedmyself:

namespaceApp\Http\Middleware;useClosure;classCorsMiddleware{/***Handleanincomingrequest.**@param\Illuminate\Http\Request$request*@param\Closure$next*@returnmixed*/publicfunctionhandle($request,Closure$next){return$next($request)->header('Access-Control-Allow-Headers',"Origin, X-Requested-With, Content-Type, Accept")
            ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
            ->header('Access-Control-Allow-Origin', '*')
            ->header('Access-Control-Allow-Credentials', true);
    }
}

As the code above did not work, I disabled this middleware and installed the middleware of the barryvdh / laravel-cors project. In the app.php file I added the lines:


$app->routeMiddleware([
     'cors' => \Barryvdh\Cors\HandleCors::class
 ]);
$app->configure('cors');
$app->register(\Barryvdh\Cors\ServiceProvider::class);

The response header with the middleware that I created by doing the request by Postman is the figure below:

Andusingthemiddlewareofthebarryvdh/laravel-corsprojectisthefigurebelow:

ToendI'llputtheAPIcallasitisintheIonicapp(theionicappiscrawlingunder link ):


avancar(){
    this.http.post('http://localhost/api/public/clientes/novo', this.data)
      .map(res => res.json())
      .subscribe(
        res => console.log(res),
        error => console.log(error)
      );
    this.navCtrl.setRoot(ConfirmacaoPage);
  }

Thanks to everyone!

    
asked by anonymous 19.11.2017 / 15:34

3 answers

0

Use Chrome Canary and disable the CORS check flag when the application opens.

I'm in a UNIX environment, I use the following alias inside my bash_profile to open:

alias canary="open -a /Applications/Google\ Chrome\ Canary.app --args --disable-web-security --user-data-dir=$HOME/canary"

I noticed that you are in Windows, so I believe that the flags needed to disable are passed in the properties of the shortcut that links to the Chrome Canary executable.

I could not make it work in this way with normal Chrome, but I used a extension that worked, I just moved for ease.

    
07.12.2017 / 14:07
0

What is CORS?

  • CORS defines a means by which a browser and a web server can interact to determine whether or not to use / allow cross-source requests.

When is a CORS validation performed?

  • When the source is different and / or when the request header is added new parameter (eg tokenAPI, userAPI).

From this, we assume that you are making a call from an X server to an API on a Y server or by adding some custom parameter in header .

At this point, the framework is executing a OPTIONS call passing ORIGEM and the additional parameters in HEADER (if any) to the request endpoint.

It is in this request OPTION that the framework validates whether the server accepts the request or not.

For the first print demonstrated, its API does not respond to method OPTION . You need to implement this method with response validations:

Access-Control-Allow-Methods : OPTIONS, GET, POST, PUT, DELETE
Access-Control-Allow-Headers : origin, content-type, accept, userAPI(Parâmetro customizado), tokenAPI(Parâmetro customizado)
Access-Control-Allow-Origin  : *
    
20.11.2017 / 20:42
-1

Oops, let's break it down: - The middleware of the barryvdh / laravel-cors project, when added in a non-global way, has to be added in the routes, via route group or individually;

  • In Ionic, you did not specify the version, I remember that there is the white list, in which you have to by the domain in which it can make http calls.
19.11.2017 / 22:00