Load remote data from json

i am developing a hybrid live streaming app in ionic4. i have to load remote data from json to get url of my chennal for live streaming. I am using http method to get data from json but i am getting error of “No ‘Access-Control-Allow-Origin’ header is present on the requested resource.” So that’s why i am using CORS policy of IONIC to avoid this error. But now i am facing error of " Types of property ‘headers’ are incompatible. [ng] Type ‘Headers’ is not assignable to type ‘HttpHeaders | { [header: string]: string | string; }’. [ng] Type ‘Headers’ is not assignable to type ‘{ [header: string]: string | string; }’. [ng] Index signature is missing in type ‘Headers’."

I am using http method to get data from json but i am getting error of “No ‘Access-Control-Allow-Origin’ header is present on the requested resource.” So that’s why i am using CORS policy of IONIC to avoid this error.

Function to load data:##

reddit-data.Service.ts:##

getRemoteData(){const headerDict = {
'Content-Type': 'application/json',
'Accept': 'application/json',
'Access-Control-Allow-Headers': 'Content-Type',}const requestOptions = {                                                                                                                                                                                 
headers: new Headers(headerDict), };
      this.http.get("url" ,requestOptions).subscribe((res) => {
   //console.log(data);
err=>{console.log(err)}});}

homepage.ts###

ngOnInit() {
this.redditService.getRemoteData();
}

I am getting error of header:###

[ng] ERROR in src/app/services/reddit-data.service.ts(56,75): error TS2345: Argument of type ‘{ headers: Headers; }’ is not assignable to parameter of type ‘{ headers?: HttpHeaders | { [header: string]: string | string; }; observe?: “body”; params?: HttpParams | { [param: string]: string | string; }; reportProgress?: boolean; responseType?: “json”; withCredentials?: boolean; }’. [ng] Types of property ‘headers’ are incompatible. [ng] Type ‘Headers’ is not assignable to type ‘HttpHeaders | { [header: string]: string | string; }’. [ng] Type ‘Headers’ is not assignable to type ‘{ [header: string]: string | string; }’. [ng] Index signature is missing in type ‘Headers’.

Solutions

1.At your server side you need to implement CROS so that server should accept request from
different origins.
In Ionic whenever we calling api and if request is from Android then origin address is
http://localhost but when we are doing it from iOS then its
ionic://localhost.

So you need to define it in your server side with CORS rules that server should response to
request which comes from http://localhost or ionic://localhost.

Then it should work

2.Another workaround is use Native HTTP to call api.Sometimes angular http not working in Ionic
for iOS and Android.
That time we can use native http plugin

import { HTTP} from ‘@ionic-native/http/ngx’
Give it try hope it helps.

i am begginer…could you please help me how to implement CORS at server

It can be different implementation for different technologies
If your backend in javascript then check this link

More about CORS you can understand from

thanks a lot …i have succesfully solve my issue

Mark it solution if you solved by my answer.
If you do it by some other way please share it so that some other person can use it in future.

Thanks

i solved it by using native HTTP method.

1 Like

i have one more issue…Actually i want to get an object from json file. After getting the specific object i want to decode that object value and store it in a variable. So that i can use it anywhere else.
I want to get url object from json data and decode url … i try to load it but it doesn’t show any data and the atob function for decoding is not working…
Please help me to solve my problem…
Service

async getRemoteData(){
     this.http.get('url', {}, {})   
  .then(data => {
  

  	 
    console.log(data.status);
    console.log(data.data); // data received by server
    console.log(data.headers);
    console.log(data);
 	//let url=(atob(data.url));
 	console.log(data.data.stream);
 	 

  })
  .catch(error => {

    console.log(error.status);
    console.log(error.error); // error message as string
    console.log(error.headers);

  });

  }
   

live streming function where i want to put decoded url for live streming

 DoStreaming(url) {
let options: StreamingVideoOptions = {
     successCallback: () => { console.log('Video played') },
     errorCallback: (e) => { console.log('Error streaming') },
    orientation: 'landscape',
    
    controls: false
  };
  
 this.streamingMedia.playVideo(url, options);

}

**CONSOLE **


url object of json that i want to get and decode

1.It may possible encoded value not in proper format.
Try to check whether encoded format is correct.