在离子项目中添加atatus时发生CORS问题

我正在尝试将Atatus添加到我的Ionic项目中。我遵循了文档以包含脚本。

第一次尝试

所以我index.html包括了这样的脚本：

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

在文档中，他们提到了CORS问题以及如何解决它们。如果正确，则无法设置标头，应在cloudfront服务器上设置此标头。因此，我已经crossorigin在script标签中添加了该属性，但是在本地运行该项目时，仍然收到CORS错误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.

第二尝试

然后，ionic.project根据Ionic的这篇博客文章，我试图通过在文件中添加代理来解决CORS问题。所以我的ionic.project文件包含：

{
  "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"
    }
  ]
}

因此，我更改index.html为使用此代理：

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

当我开始提供服务时ionic serve，输出看起来很有希望：

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

但是很遗憾，我在控制台中收到拒绝连接的消息：GET http://localhost:8100/atatus.js net::ERR_CONNECTION_REFUSED。

第三尝试

我以为这可能是因为使用了localhost而不是我的内部IP 192.168.178.59。所以我改变了所有使用localhost到192.168.178.59，但后来我得到了403 Forbidden。

第四次尝试

我做的最后一个测试是atatus通过Bower在本地添加库：

bower install atatus-js

也相应地进行了更改index.html：

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

现在，在加载库时，我没有收到任何错误，但是当我通过控制台手动通过atatus通知时：atatus.notify(new Error('Test Atatus Setup'));我收到以下错误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(…)

我不明白。为什么要抱怨http://192.168.178.59:3001/socket.io/socket.io.js。这是我的本地运行socket.io服务器，可以正常运行并配置了CORS。无需atatus添加，整个项目就可以使用这些套接字完美运行。

第五尝试

我已经第四次尝试将项目部署到DigitalOcean服务器。因此，该atatus库在本地加载（更高）。没有出现CORS问题，但是在控制台中添加通知时收到以下错误：

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(…)

解决方案

我必须更改2个设置，分别是：

• 设置下一个： $.ajaxPrefilter(function( options, originalOptions, jqXHR ) {options.async = true;});
• 添加https://*.atatus.com到default-src该的Content-Security-Policy元头。