Question

我正在尝试将Atatus添加到我的Ionic项目中。我按照documentation来包含脚本。

首先尝试

所以我的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 issues以及如何解决它们。如果我是正确的，标题是我无法设置的，此标题应该在cloudfront服务器上设置。所以我在脚本标记中添加了crossorigin属性，但在使用ionic serve本地运行项目时仍然收到CORS错误：

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的blog post在ionic.project文件中添加代理来解决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。

第四次尝试

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

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库在本地加载（bower）。没有出现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。

Answer 1

感谢@MarkVeenstra

从Cordova 5.x开始，您需要指定Content-Security-Policy元标头。在default-src的此标题中，您必须添加https://*.atatus.com。一切都有效。

将atatus添加到离子项目

1 个答案: