将 atatus 添加到 ionic 项目时出现 CORS 问题

Posted 2023-03-04

【中文标题】将 atatus 添加到 ionic 项目时出现 CORS 问题

【英文标题】：CORS issues when adding atatus to ionic project

【发布时间】：2015-12-15 07:16:42

【问题描述】：

我正在尝试将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 以及如何解决它们。如果我是正确的，我无法设置标头，此标头应在云端服务器上设置。所以我在脚本标记中添加了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 库是在本地加载的（凉亭）。没有出现 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 添加到Content-Security-Policy 元标头的default-src。

【问题讨论】：

您的本地状态中的版本号是多少（第五次尝试）？ （您可以在 atatus.js 文件的顶部看到它）。仅供参考，我们没有使用 XMLHttpRequest 将有效负载发送到我们的服务器。我们只是使用图像脚本标签来发送有效载荷。

这是第五次尝试从atatus.min.js到bower安装的版本信息：` AtatusJs - v2.2.5 - 2015-09-01`

我试过:(。但我无法重现这个问题。你能试试$.ajaxPrefilter(function( options, originalOptions, jqXHR ) options.async = true;);

Synchronous XMLHttpRequest 消息消失了，但Uncaught TypeError: Cannot read property 'test' of undefined 仍然错误

好的。好的。您可以添加 debugMode 选项以查看发送到 atatus 服务器的任何有效负载吗？ atatus.config('MY_API_KEY', debugMode: true ).install(); 当你调用atatus.notify(new Error('Test Atatus Setup')); 时，它应该打印正在发送的payload，你也可以在网络面板中看到请求。

【参考方案1】：

感谢@MarkVeenstra

由于Cordova 5.x，您需要指定Content-Security-Policy 元标头。在default-src 的此标头中，您必须添加https://*.atatus.com。然后一切正常。