0

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.

zsoflin
  • 373
  • 5
  • 17
  • is this a browser error? – Sarantis Tofas Oct 19 '16 at 16:41
  • I don't believe so. I've tried it on several browsers and on several machines. Still the same error. – zsoflin Oct 19 '16 at 17:10
  • there is a workaround using CORS plugin https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi – Sarantis Tofas Oct 19 '16 at 17:17
  • This functionally works for me, but not for a product used by others. I need a stable way to do this. – zsoflin Oct 19 '16 at 17:29
  • 1
    cordova-whitelist plugin is not for browser. Only to execute in an app on a device. – e666 Oct 19 '16 at 18:16
  • 1
    Well, Cross Origin only exists on browsers (or, a localhost). You won't get a CORS error on a device. So why not just use the chrome or mozilla extension? I haven't checked or used this, but if you want to, you can check this on ionic blog http://blog.ionic.io/handling-cors-issues-in-ionic/ – Marko Oct 19 '16 at 20:22
  • You are correct @Marko, Once I built it and deployed it to the device, it worked perfectly. If you'd like, make your comment an answer and I'll accept it. – zsoflin Oct 20 '16 at 14:30
  • I've actually seen this question a lot these days, so I might as well post an answer here instead of commenting everyone lol – Marko Oct 20 '16 at 14:53

1 Answers1

3

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/

Marko
  • 917
  • 9
  • 14