Identical JSON in new URL not working

Ionic Framework ionic-v3
#1

Hey all,
I’m desperate for a problem right now and I just can’t find the solution. Maybe you can help me with that. I copied the identical data from a test API and uploaded it to my server, but as soon as I change the URL to my server, nothing will work.

I followed this tutorial tutorial djamware

@Injectable()
export class RestProvider {
  apiUrl = 'https://jsonplaceholder.typicode.com/users';
  apiUrl2 = 'https://www.billigtanken.ch/json.php';

  constructor(public http: HttpClient) {
  }

  getUsers() {
    return new Promise(resolve => {
      this.http.get(this.apiUrl).subscribe(data => {
        resolve(data);
      }, err => {
        console.log('JSON Get: '+err);
        });
    });
  }

Working API URL https://jsonplaceholder.typicode.com/users
Not working API URL https://billigtanken.ch/json.php

I changed the Content-Type in the header with this line <?php header('Content-Type: application/json');?>

My used versions:

  "dependencies": {
    "@angular/common": "5.0.3",
    "@angular/compiler": "5.0.3",
    "@angular/compiler-cli": "5.0.3",
    "@angular/core": "5.0.3",
    "@angular/forms": "5.0.3",
    "@angular/http": "5.0.3",
    "@angular/platform-browser": "5.0.3",
    "@angular/platform-browser-dynamic": "5.0.3",
    "@ionic-native/core": "4.4.0",
    "@ionic-native/geolocation": "^4.5.3",
    "@ionic-native/splash-screen": "4.4.0",
    "@ionic-native/status-bar": "4.4.0",
    "@ionic/storage": "2.1.3",
    "cordova-plugin-geolocation": "^4.0.1",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "rxjs": "5.5.2",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.18"
  },
#2

Maybe on your server cors is not set up correctly. I get this error:

Failed to load https://www.billigtanken.ch/json.php: 
Response to preflight request doesn't pass access control check: 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'https://ionic-blank-1uqrax.stackblitz.io' is therefore not allowed access. 
If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
#3

Damn, you are my hero! Now it works.

I changed the header to:

<?php
	header('Content-Type: application/json');
        header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}");
        header('Access-Control-Allow-Credentials: true');
        header('Access-Control-Max-Age: 86400');    // cache for 1 day
?>
1 Like
#4