How to fix cordova Cross origin issue in ionic 2


#1

I am using ionic 2 file transfer native plugin in my app to download Sample.csv file from the server.

  const fileTransfer: TransferObject = this.transfer.create();

  let url = 'http://example.com' + data.filepath;
  console.log(url);

  fileTransfer.download(url, this.file.dataDirectory + 'Sample.csv').then((entry) => {
      console.log('download complete: ' + entry.toURL());
   }, (error) => {
      console.log("No file to download");
   });

It’s giving me below error

'Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://example.com/sample.csv (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).'

#2

Do you have the link whitelisted?


#3

Sorry @ihadeed

I didn’t get your question, Can you just elaborate it please so that I can come up to you with what you are specifically asking for ?

Thanks


#4

Sorry, I don’t think it’s a whitelist issue.

I just remembered, I had this issue before. I had to add CORS headers on my server to allow the app to pull data from it.

What language is your back end written in?

If you’re using Express, just install this: https://www.npmjs.com/package/cors

If you’re using something else, try to find a module, or just add a middleware that adds the following header to all responses:

Access-Control-Allow-Origin: *

You might also need to add an OPTIONS route to all the routes and just make it send a success code (200) to let the browser know that it’s ok to access that path/file. Not sure if this is needed on mobile webview, but I know Google Chrome uses it.


#5

Thank you @ihadeed for getting me back.

The back end is in PHP Zend Framework.

Yes, I have included the header response Access-Control-Allow-Origin: * in PHP server side scripting language.

I need to check it in the Real Android device. Can you please let me know the how to generate an .apk file of MyApp project. I am using Ubuntu OS in which Android_Path SDK is not getting.

Can you help me out with this ?

Thanks.


#6

Please help me also i am facing similar issues in Ionic3… I am using file transfer plugin but anytime i trigger the download i get cors error and i have settled every cors error in my backend. To be sure of this i copied an image url online and i tried downloading the image but i still get cors error which means its a problem from ionic not my backend.
And also i will like to ask that “how do you test the file transfer” because i run the command “ionic cordova run browser” to be able to test the plugin but i am not sure thats the right way maybe thats why I am having the cors issue… Please help me