没有使用 OneSignal 设置的 Access-Control-Allow-Origin答案

【问题标题】：No Access-Control-Allow-Origin using OneSignal setup没有使用 OneSignal 设置的 Access-Control-Allow-Origin
【发布时间】：2017-11-15 20:42:16
【问题描述】：

我正在使用OneSignal 为客户网站发送网络推送消息。我关注了HTTPS setup。我检查了几次，确保一切都正确完成。

所有文件都上传到域的根目录
我已设置清单并将所需的初始化代码放在页面标题中

当我加载我得到的页面时：

Fetch API cannot load https://onesignal.com/api/v1players. 
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'https://example.com' is therefore not allowed access. 
The response had HTTP status code 404. If an opaque response serves your needs, 
set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

我直接联系了团队，但他们只是复制粘贴的部分文档。没有提供进一步的帮助。

使用 Chrome 版本 58 / Windows 10

我做错了什么？

【问题讨论】：

您是否将请求的模式设置为“no-cors”以获取禁用 CORS 的资源？
你能给我们你的页面 URL，你从哪里尝试集成 onesignal？
@JoshBeam 我只是像任何用户一样使用他们的基本实现，这是否有必要，如果有任何链接到哪里启用它？
消息说https://onesignal.com/api/v1players 是 404 未找到。如果我将该 URL 粘贴到我的地址栏中，我也会得到 404
@IdanShechter 我不知道是什么触发了它，但据我所知，OneSignal 实际上支持做你想做的事情的“常规代码”是他们在documentation.onesignal.com/docs/web-push-sdk-setup-https 的文档中的内容以及此处答案中的代码 sn-p 。如果你做的事情与此不同，我认为这不是 OneSignal 实际支持的“常规代码”。如果您编辑/更新问题以显示实际前端 JavaScript 代码的 sn-p，也许会有所帮助。

标签： javascript cors onesignal

【解决方案1】：

https://onesignal.com/api/v1players 响应显然不包含 Access-Control-Allow-Origin 响应标头，因为它们不包含，您的浏览器会阻止您的前端 JavaScript 代码访问响应。

您无法对自己的前端 JavaScript 代码或后端配置设置进行任何更改，这些设置将允许您的前端 JavaScript 代码以您尝试的方式直接向 https://onesignal.com/api/v1players 发出请求并成功获得响应。

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS 解释得更详细，但要点是，对于 CORS，发送请求的服务器必须配置为发送 Access-Control-Allow-Origin 响应标头。

无论如何https://documentation.onesignal.com/docs/web-push-sdk-setup-https 有官方文档解释了他们支持的 SDK，这显然需要你做更多这样的事情：

<head>
  <link rel="manifest" href="/manifest.json">
  <script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async></script>
  <script>
    var OneSignal = window.OneSignal || [];
    OneSignal.push(["init", {
      appId: "YOUR_APP_ID",
      autoRegister: false,
      notifyButton: {
        enable: true /* Set to false to hide */
      }
    }]);
  </script>
</head>

【讨论】：

我只是使用他们的代码。我在网站上有相同的代码（刚刚修改），应该让它工作。我只是以最基本的方式使用他们的服务。它应该可以工作。

【解决方案2】：

接受的答案是可以的，使用标签可以解决大部分需求：

OneSignal.push(function() {
  /* These examples are all valid */
  OneSignal.sendTag("key", "value");

  OneSignal.sendTag("key", "value", function(tagsSent) {
    // Callback called when tags have finished sending
  });

  OneSignal.sendTag("key", "value").then(function(tagsSent) {
    // Callback called when tags have finished sending
  });  
});

但如果您想编辑设备信息，（截至目前）无法使用 WebPush SDK 编辑设备元数据。我需要定期更新位置，我不想使用标签。因此，我将 PUT 请求发送到 https://onesignal.com/api/v1players，如下所示：

function createCORSRequest(method, url) {
  var xhr = new XMLHttpRequest();
  if ("withCredentials" in xhr) {
    xhr.open(method, url, true);
  } else if (typeof XDomainRequest != "undefined") { //ie8 ie9
    xhr = new XDomainRequest();
    xhr.open(method, url);
  } else {
    xhr = null;
  }
  return xhr;
};

//then every time I needed to update the device
var url = 'https://onesignal.com/api/v1/players/' + playerId;
var xhr = createCORSRequest('PUT', url);
xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");

xhr.onload = function() {}; //success
xhr.onerror = function() {}; //error

var deviceInfo = {
  "app_id": oneSignalAppId,
  "timezone": (currentDateTime.getTimezoneOffset()) * -60, //offset from utc
  //whatever fields you need to update
};

xhr.send(JSON.stringify(deviceInfo));

【讨论】：