Ionic CORS inconsistency between android build and development environment

Ionic Framework Ionic Angular
1

Hello guys!

I m pretty new to ionic and I m currently trying to make an app where you can get the link to the audio of the youtube video, it looks good on paper until i tried it out. I know there is a problem regarding with CORS so i tried to use cor-anywhere heroku (a cor proxy). e.g->http://cor-anywhere.heroku.com/link to get the data. It works fine but the only problem is sometimes it takes as much as 2 minutes to get what i want which is not ideal. So I made a nodejs web application and put it on my web hosting. (I also set the response header of the application to “Access-Control-Allow-Origin” to *) and then, it works well! Yay! But here comes the actual problerm.

The android build can’t seem to access my nodejs application despite it worked well in the localhost:8100 (development env), Umm to be more clear, e.g -> this is my link -> www.example.com/dosmth

let res = Http.request({
method: ‘GET’,
url: 'http://www.example.com/dosmth/?id=’+this.YoutubeID,

        });

And it didnt work.

So again, I changed it to http://cors-anywhere.heroku.com/‘mylink’ and it works well. So what is wrong with my code? Please do answer. If the information is not enough please do tell me

Regards

2

One thing would appear to be that you wrote “htto” where you meant “http”.

1 Like
3

That’s just my typo here, it is http in my actual code

4

here is my code on my server, in case you want to know

const Fetch = require("node-fetch");
var http = require('http');
const url = require('url');

const port = process.env.PORT || 3000

http.createServer(function (req, res) {
    
    res.setHeader('Access-Control-Allow-Origin','null');
    res.writeHead(200, {'Content-Type': 'text/html'});
    
    const queryObject = url.parse(req.url,true).query;
    console.log(queryObject.id);
    // YouTube video ID
    var videoID = queryObject.id;

        // Fetch video info
        Fetch("https://www.youtube.com/get_video_info?video_id=" + videoID).then(response => {
            if (response.ok) {
                response.text().then(yData => {
      
                 // parse response to find audio info
                 var ytData = parse_str(yData);
                  var getAdaptiveFormats = JSON.parse(ytData.player_response).streamingData.adaptiveFormats;
                var findAudioInfo = getAdaptiveFormats.findIndex(obj => obj.audioQuality);
      
                 //Link
                 audioURL = getAdaptiveFormats[findAudioInfo].url;
                res.end(audioURL);
            });
        }
    });
    console.log("server started!");
}).listen(port);

function parse_str(str) {
  return str.split('&').reduce(function(params, param) {
    var paramSplit = param.split('=').map(function(value) {
      return decodeURIComponent(value.replace('+', ' '));
    });
    params[paramSplit[0]] = paramSplit[1];
    return params;
  }, {});
}
5

and this is my http code on the client side

let res = Http.request({
              method: 'GET',
              url: 'http://example.com/dosmth?id='+this.YoutubeID,
               //ofc this is not my actual domain but just an example
            });
            res.then(responseData => {
              console.log(responseData);
              console.log(responseData.data);

               //this is my service for presenting toast to show the details to the user
              this.service.fileService.presentToast(responseData.data, 10000);
            }, reason => {
              console.log("Failed");
              console.log(reason);
              this.service.fileService.presentToast(reason, 10000);
            })