CORS issues when adding atatus to ionic project

Question

I am trying to add Atatus to my Ionic project. I followed the documentation to include the scripts.

FIRST TRY

So my index.html includes the scripts like this:

<script src="https://dmc1acwvwny3.cloudfront.net/atatus.js" crossorigin="anonymous" type="application/javascript" />
<script type="text/javascript"> atatus.config('MY_API_KEY').install(); </script>

In the documentation they mention CORS issues and how to solve them. The header is something I can't set if I am correct, this header should be set on the cloudfront server. So I have added the crossorigin attribute in the script tag, but still I receive the CORS error when running the project locally with ionic serve:

Script from origin 'https://dmc1acwvwny3.cloudfront.net' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://192.168.178.59:8100' is therefore not allowed access.

SECOND TRY

Then I tried to solve the CORS issues with adding proxies in the ionic.project file according to this blog post from Ionic. So my ionic.project file contains:

{
  "name": "my-amazing-app",
  "app_id": "345gfsd3trf",
  "gulpStartupTasks": [
    "build:env",
    "build:index",
    "build:sass",
    "build:template",
    "build:js",
    "concat:index",
    "watch"
  ],
  "proxies": [
    {
      "path": "/atatus.js",
      "proxyUrl": "https://dmc1acwvwny3.cloudfront.net/atatus.js"
    }
  ]
}

So I changed the index.html to use this proxy:

<script src="http://localhost:8100/atatus.js" crossorigin="anonymous" type="application/javascript" />
<script type="text/javascript"> atatus.config('MY_API_KEY').install(); </script>

When I start serving with ionic serve the output looks promising:

me@my-laptop:~/Documents/Projects/my-amazing-app$ ionic serve
Gulp startup tasks: [ 'build:env',
  'build:index',
  'build:sass',
  'build:template',
  'build:js',
  'concat:index',
  'watch' ]
Running live reload server: http://192.168.178.59:35729
Watching : [ 'www/**/*', '!www/lib/**/*' ]
Proxy added: /atatus.js => https://dmc1acwvwny3.cloudfront.net/atatus.js
Running dev server: http://192.168.178.59:8100
Ionic server commands, enter:
  restart or r to restart the client app from the root
  goto or g and a url to have the app navigate to the given url
  consolelogs or c to enable/disable console log output
  serverlogs or s to enable/disable server log output
  quit or q to shutdown the server and exit

But unfortunally I receive a connection refused in the console: GET http://localhost:8100/atatus.js net::ERR_CONNECTION_REFUSED.

THIRD TRY

I thought maybe this is because of the use of localhost instead of my internal IP 192.168.178.59. So I changed all use of localhost to 192.168.178.59, but then I get a 403 Forbidden.

FOURTH TRY

The last test I did was adding atatus library locally through bower:

bower install atatus-js

Also changed the index.html accordingly:

<script src="lib/atatus-js/atatus.min.js" crossorigin="anonymous" type="application/javascript" />
<script type="text/javascript"> atatus.config('MY_API_KEY').install(); </script>

Now I receive no errors when loading the library, but when I trough an notify to atatus manually through the console: atatus.notify(new Error('Test Atatus Setup')); I receive the following errors from atatus.min.js:

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/.
XMLHttpRequest cannot load http://192.168.178.59:3001/socket.io/socket.io.js. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://192.168.178.59:8100' is therefore not allowed access.
Uncaught TypeError: Cannot read property 'test' of undefined(…)

Which I don't understand. Why is it complaining about http://192.168.178.59:3001/socket.io/socket.io.js. This is my local running socket.io server, which runs correctly and has CORS configured. Without atatus added the whole project runs perfectly with these sockets.

FIFTH TRY

I have deployed the project with the fourth try to a DigitalOcean server. So the atatus library is loaded locally (bower). No CORS issues arise, but I receive the following error when adding a notify in the console:

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/.
Uncaught TypeError: Cannot read property 'test' of undefined(…)

SOLUTION

I had to change 2 settings, being:

• Set the next: $.ajaxPrefilter(function( options, originalOptions, jqXHR ) {options.async = true;});
• Add https://*.atatus.com to the default-src of the Content-Security-Policy meta header.

Answer 1

Thanks to @MarkVeenstra

Since Cordova 5.x, you need to specify the Content-Security-Policy meta header. In this header in the default-src, you have to add https://*.atatus.com. Then all works.