将属性添加到离子项目时出现 CORS 问题

Question

我正在尝试添加 Atatus to my Ionic project. I followed the 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 以及如何解决它们。如果我是正确的，header 是我无法设置的东西，这个 header 应该在云端服务器上设置。所以我在脚本标签中添加了 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 添加到 Content-Security-Policy 元 header 的 default-src。

Answer 1

感谢@MarkVeenstra

自 Cordova 5.x 起，您需要指定 Content-Security-Policy 元 header。在这个header里的default-src，你要加上https://*.atatus.com。然后一切正常。

将属性添加到离子项目时出现 CORS 问题

CORS issues when adding atatus to ionic project

cors

angularjs

ionic-framework

ionic

atatus