CORS issues when adding atatus to ionic project - angularjs

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.