Getting 'No Access-Control-Allow-Origin header is present on the requested resource' error when trying to pass jwt tokens in Ionic 3

Question

I'm learning Ionic 3 and have successfully implemented authentication registration etc. But after the auth process I could not send the stored tokens to any protected page.

This is the error that I'm getting.

XMLHttpRequest cannot load http://myapp.dev/api/profile/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access. (index):1 error

This is the JWT lib I'm using https://github.com/auth0/angular2-jwt

My Ionic App is running at localhost:8100 My server side app is running at app.dev

HttpService

import {Injectable} from '@angular/core';
import {Http, Headers} from '@angular/http';
import * as AppConfig from '../../app/app.config';
import {AuthHttp} from 'angular2-jwt';

@Injectable()
export class HttpService {

  post(url, data) {
   return this.authHttp.post(url,JSON.stringify(data));
  }

}


import { Component } from '@angular/core';
import { IonicPage, NavController } from 'ionic-angular';
import {Validators, FormBuilder, FormGroup} from '@angular/forms';
import { HttpService } from  '../../providers/http-service/http-service';
import {Storage} from '@ionic/storage';

/**
 * Generated class for the ProfiePage page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */
@IonicPage()
@Component({
  selector: 'page-profie',
  templateUrl: 'profie.html',
})

App.modulte.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import {Http,HttpModule} from '@angular/http';
import {Storage} from '@ionic/storage';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { AuthServiceProvider } from '../providers/auth-service/auth-service';
import { ProfiePage } from '../pages/profie/profie';
import {AuthHttp, AuthConfig} from 'angular2-jwt';

import {IonicStorageModule} from '@ionic/storage';
import {HttpService} from '../providers/http-service/http-service';

let storage = new Storage({});

export function getAuthHttp(http) {
  return new AuthHttp(new AuthConfig({
    noJwtError: true,
    globalHeaders: [{'Accept': 'application/json'}],
    tokenGetter: (() => storage.get('token')),
  }), http);
}



@NgModule({
  declarations: [
    MyApp,
    HomePage,
    ProfiePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    IonicStorageModule.forRoot(),
    HttpModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    ProfiePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    AuthServiceProvider,
    HttpService,
    {
      provide: AuthHttp,
      useFactory: getAuthHttp,
      deps: [Http]
    }
  ]
})

export class AppModule {

}

Profile Component

export class ProfiePage {

  private formData: FormGroup;
  public error: string = "";

  fname: any;
  lname: any;
  location: any;

  constructor(
    public formBuilder: FormBuilder,
    public httpService: HttpService,
    private storage: Storage
  ) {

    this.formData = this.formBuilder.group({
      fname: ['', Validators.required],
    });


  }

  save() {

    this.httpService.post("http://myapp.dev/api/profile/", {
      fname: this.fname
    }).subscribe(
      data => {
        console.log("success")
      },
      error => {
        console.log("error")
      });


  }

}