CORS issues with Atatus


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

So my index.html includes the scripts like this:

<script src="" 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 '' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '' is therefore not allowed access.

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": [
  "proxies": [
      "path": "/atatus.js",
      "proxyUrl": ""

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',
  'watch' ]
Running live reload server:
Watching : [ 'www/**/*', '!www/lib/**/*' ]
Proxy added: /atatus.js =>
Running dev server:
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.

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

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
XMLHttpRequest cannot load No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '' is therefore not allowed access.
Uncaught TypeError: Cannot read property 'test' of undefined(…)

Which I don’t understand. Why is it complaining about This is my local running server, which runs correctly and has CORS configured. Without atatus added the whole project runs perfectly with these sockets.


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://* Then all works.