Access Control Origin issue when trying to do $http.post to IFTTT in Ionic & Angular

Question

I am having an issue while trying to perform a $http.post to the IFTTT maker channel. Below is the code I am using to perform the POST:

$http.post(
    'https://maker.ifttt.com/trigger/{my-event}/with/key/{my-key}',
    {value1:"hello",value2:"goodbye"}
).then(
     function successCallback(response) {
        console.log(response);
     }, 
     function errorCallback(response) {
        console.log("error: ",response);
     });

The response I get is the following:

XMLHttpRequest cannot load https://maker.ifttt.com/trigger/{my-event}/with/key/{my-key}. 
Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access.

I have the cordova-whitelist plugin and have tried various solutions adding Access-Control-Origin to the header and still get a similar response.

Answer 1

CORS issues only exist on browsers. In this case, they only exist using ionic serve.

When deploying an app to an actual device, you will not get a CORS error.

Since CORS is only an issue when running your app in development mode with ionic serve, and not when running as a mobile app packaged with Cordova, a simpler option is to just disable CORS altogether for local development. For Chrome for example there's a plugin called "Allow-Control-Allow-Origin: *" that lets you disable CORS.

If you still want to handle cors in a code way, you can get more info about that here http://blog.ionic.io/handling-cors-issues-in-ionic/

Having that in mind, it's a faster and a better way to just get a CORS plugin for mozilla or chrome. You can get them here

Chrome - https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi

Mozilla - https://addons.mozilla.org/en-US/firefox/addon/cors-everywhere/