Cross Origin error from Chrome

ionic-v1
1

Hello folks!

I’m writing a very common topic, but I am desperate, wasted two days trying to make this work.

I’m on Chrome, trying to make my first Login/Register app and at the time of sending the data to the backend, i get the following error:

XMLHttpRequest cannot load http://192.168.1.133:8100/api/login. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:8100’ is therefore not allowed access. The response had HTTP status code 500.

Ionic code:

$scope.data = "UserName"; // for example

$scope.register = function() {

      var conAjax = $http.post('http://192.168.1.133/api/register', $scope.data);

      conAjax
        .success(function(respuesta){
           console.log(respuesta.message);
      })
        .error(function(respuesta) {
          console.log("error");
        });
    }
])

And the backend in Laravel, is simple:


    public function login (Request $request) {

      $inputArray = $request->all();

      return response()->json(["message" => "Login: All Correct"]);
    }

I don’t even do any operation, just return ‘Correct’.

To my config.xml I’ve added whitelist allowance to ALL (for testing):

<allow-navigation href="http://*/*" />
<allow-navigation href="*" />
<access origin="*"/>

In PHP Laravel I’ve disabled CORS, following a tutorial.

I’ve tried to add the <meta http-equiv=“Content-Security-Policy” …> tag, but only generates me errors.

And I keep getting this same error on Chrome console.
I just want to know if I am sending alright the params, for Login to the API.

It also doesn’t work Testing links like: https://requestb.in/ , where I can test GET/POST requests.

I don’t know what else I am missing…

On Windows 10, Ionic v1.

Thanks a lot!

2

What did you do in PHP? Does it return the correct headers now?

What errors?

Alternatively to fighting with this you could also use a Service Proxy of the Ionic CLI. GitHub - ionic-team/ionic-cli: The Ionic command-line interface

3

My meta tag:
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' http://* 'unsafe-inline'; script-src 'self' http://* 'unsafe-inline' 'unsafe-eval'"; />

The error shows me:

localhost/:124 Refused to load the script ‘http://localhost:35729/livereload.js?snipver=1’ because it violates the following Content Security Policy directive: “script-src ‘self’ http://* ‘unsafe-inline’ ‘unsafe-eval’”.

I won’t go deep into Laravel, as not everybody knows about all backends in a Ionic Forum, but in a nutshel what I did was, disable “VerifyCsrfToken”, to make the connection work easily (yet unsecure by testing phase).
And allow all kind of connection. No credentials, allow all origins… maybe is allowedHeaders?

    'supportsCredentials' => false,
    'allowedOrigins' => ['*'],
    'allowedHeaders' => ['Content-Type', 'X-Requested-With'],
    'allowedMethods' => ['*'],  // ex: ['GET', 'POST', 'PUT',  'DELETE']
    'exposedHeaders' => [],
    'maxAge' => 0,

What I have in my mind is, remove all kind of protection to make app work, and later worry about security, tokens, CSRF, and so. :confused: Thank you!

4

The error message you are getting is quite specific. It says nothing of a meta tag.

[quote=“ButterySAM777, post:1, topic:93467”]
No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:8100’ is therefore not allowed access.[/quote]

Check if the call to /api/login returns this “Access-Control-Allow-Origin” header with a appropriate value.

This indicates that your Laravel backend is currently broken and not returning a “OK” message (code 2xx) but an error.

5

Meanwhile I keep looking for information about CORS in Laravel PHP framework, I wanted to do some tests with https://requestb.in/.

Here I’ve created other times, a RequestBin where I can check which GET and POST information I send.

Now Chrome console shows me the following:

XMLHttpRequest cannot load https://requestb.in/u2ua02ub. Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:8100’ is therefore not allowed access.

So it must be something non working good in the front-end, right?

I’m desperate =( thanks!

6

Similar problem: The response to the preflight request (OPTIONS …) doesn’t return the correct headers.

Have a look at this:

7

I don’t know Laravel, so don’t know how diabling CORS works. Because of that, this might be useless to your situation, but it works for me. I am not using a php framework of any kind, so this is an example of a simple php page that I send my data to. No guarantees on security, etc…, but it serves my purposes while developing at least.

"<?php
header("Access-Control-Allow-Headers: credentials, Content-Type, origin, Methods, charset" );
header("Access-Control-Allow-Origin : http:// localhost:35729 " );
header("Access-Control-Allow-Credentials: true " );
header("Access-Control-Allow-Methods: POST, GET, OPTIONS");
header('Vary: Origin') ;
header("Content-type: application/json");

?>"
Without the space before localhost:35729. Your process is obviously different, but maybe you'll see something that provides a clue in the context of Laravel. I have charset as an allowed header, but don't define one. I took the line of code that defined my charset out, but decided to leave good enough alone and kept it as one of the allow-headers. It can probably be deleted.

Maybe explicitly adding OPTIONS to your list of Allow-Methods somehow will do the trick. I vaguely remember that being a barrier of mine. Vary: Origin was a header that helped me get pass the preflight response issue, I believe. And of course, just replace local host with * to allow wildcard access.
8

CORS is an issue on the backend, keep in mind that when you run your app on actual device (not with livereload) you will not have the CORS issue because you wont be running it from a webserver like ionic serve.
this blog explains how to deal with it, and there is many packages that are compatible with laravel to handle CORS.
also keep in mind that it is not recommended to disable CORS entirely, it exist for a good reason.