Access-Control-Allow-Origin fails just on livereload on iOS

Ionic Framework ionic-v3
1

Ok so my app has to make a http request to an api. Things work fine from an iOS build, but as soon as i try to build an iOS build with live-reload. In the browser it works just fine, but in iOS(live-reload) i get an Access-Control-Allow-Origin not allowed error. If i watch the console through safari it doesn’t have any returned ACAO header. I am using Laravel for my api server and i have cars setup correctly. I know this because if i do a request in the browser i see the header come back with * as it’s value. If i watch the console for the web browser version (chrome) it does two requests which is a bit surprising. First an OPTIONS method, then a second request for the actual POST. The second request (Web Browser POST) returns the proper headers

Access-Control-Allow-Methods:GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Origin:*

So cors is working.
The problem is iOS live reload tries the first OPTIONS method and fails. so it never actually does the API call.

Technically i can compile the app install it (without the live reload) and it will work, but this is killing me because it takes so long to do this over and over again. Below is the code for the request.

import { Injectable } from ‘@angular/core’;
import { Http } from ‘@angular/http’;
import { HttpModule,Headers } from ‘@angular/http’;

import { LoginPage } from ‘…/…/pages/login/login’;

import ‘rxjs/add/operator/map’;

declare var navigator: any;
declare var Connection: any;

@Injectable()
export class ApiDataProvider {

constructor(public http: Http) {
}
getRemoteData(url, data){
data[“key”] = “************************”;
var headersObject = new Headers();
// headersObject.append(‘Content-Type’, ‘text/plain’);
headersObject.append(‘Content-Type’, ‘application/json’);
return this.http.post(url, data, {headers: headersObject});
}

as you can see (from commented out code). I attempted to side step the access control by passing a content-type of text/plain, but that didn’t help

below is the larvel code:

<?php namespace App\Http\Middleware; use Closure;

class Cors
{
/**
* Handle an incoming request.
*
* @param \Illuminate\Http\Request $request
* @param \Closure $next
* @return mixed
/
public function handle($request, Closure $next)
{
return $next($request)
->header(‘Access-Control-Allow-Origin’, '')
->header(‘Access-Control-Allow-Methods’, ‘GET, POST, PUT, DELETE, OPTIONS’);
}
}

I would love for some help getting my api working with iOS live-reload

2

Is your api returning the correct ACAO header for the OPTIONS request? Or just the POST?
If not, you need to have it return for the OPTIONS request.

3

Yes, all appropriate methods. Yeah i made sure that one was in there.

I did find a solution though and this is heavily related to larvel. I had to register a global options route, and since we don’t use options for anything really i was able to add what we needed to the route without affecting the rest of the site. For those who might be in my same place the solution is to add this to the Http/routes.php:

Route::options(‘{all}’, function () {
return response(‘ok’, 200)
->header(‘Access-Control-Allow-Methods’, ‘POST, GET, OPTIONS, PUT, DELETE’)
->header(‘Access-Control-Allow-Origin’, ‘');
})->where(‘all’, '.’);

This is the only way to modify the headers that come back on an options route.

Sorry to the ionic community for coming in with a problem that didn’t stem from an ionic/angular issue. I’m still a little confused why this only affects live-reloading iOS apps. also i’m not sure why an options request is being done. In my opinion it is an extra call that doesn’t need to be made. Thanks for the help Beck24

4

This is how CORS works - OPTIONS call to find out what the server allows. Livereload has a different context, so it is triggered in this case.