zsoflin zsoflin - 11 months ago 130
AngularJS Question

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

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 Source

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/