ionic laravel XMLHttpRequest cannot load

Question

i am new to this and i am trying to login and get a token so the ionic and laravel can communicate. I am using satellizer and jwt on laravel. on post man i get the token back:

this is what i am getting loging in from ionic: [enter image description here][2]

the error says:

XMLHttpRequest cannot load http://localhost:8000/api/authenticate. 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.

and yeah, on my laravel side, i have included

header("Access-Control-Allow-Origin: *");

what am i missing here, thank you

Answer 1

There are many factors to why this happens. the error may happen because you have no access headers and the browsers gets this and blocks your requests.

It also happens when you your server experiences internal errors like 500,403,401 etc. you may have added headers to the requests life cycle(like in the middleware to filter all api requests) in your laravel app but sometimes an error 500 or even an echo or dd() interrupts the whole request life cycle and returns the errors WHICH the browser can't interpret through an ajax call and therefore it loses the headers you implicitly added thus the browser goes back to the preflight request error..

The only solution I suggest is proper error handling in your code and returning errors in a response and return it in json format.

public function someController extends Controller{
    public function Foo(Request $request){
    $input_bag = [
            'some input' => first_$input,
            'another important input' => $second_input,                
        ];

        $i = 0;
        foreach ($input_bag as $key => $value) {
            $value = trim($value);

            if (empty($value)) {
                $error_bag[$i] = "$key empty";
                $i++;
            } else {
                //
            }
        }
        //filter of false or null values
        if (array_filter($error_bag)) {
            return response()->json($error_bag, 400);
        }


    }

this returns a json response of the errors while running the code. and good use of try catches and returning the appropriate responses could make your debugging life easy.