2017-06-13 4 views
0

クライアントのWebサイトでWebプッシュメッセージングにOneSignalを使用しています。私はHTTPS setupに従った。私はそれを何度か上って、すべてが正しく行われたことを確認しました。OneSignal設定を使用したAccess Control-Allow-Originなし

  • すべてのファイルがドメイン
  • のルートにアップロードされた私は、セットアップマニフェストきたし、私はページをロードするとページ

のヘッダに必要な初期化コードを置くI取得:

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の使用

私は間違っていますか?

+0

あなたは無効CORSとリソースを取得するために「no-CORS」に要求のモードを設定しましたか? –

+0

あなたは私たちにあなたのページURLを与えることができますどこから信号を統合しようとしますか? –

+0

@ JoshBeam私はちょうどどんなユーザーのように、基本的な実装を使用して、これが必要ですか? –

答えて

2

https://onesignal.com/api/v1playersレスポンスヘッダーがレスポンスヘッダーに含まれていない可能性があります。レスポンスヘッダーが含まれていないため、ブラウザはフロントエンド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> 
+0

私はそのコードを使用します。私はサイト上で同じコード(変更されたばかり)を持っており、それを動作させるべきです。私はちょうど最も基本的な方法で彼らのサービスを使用します。それは動作するはずです。 –

0

受け入れ答えは大丈夫です、あなたがタグを使用して要件のほとんどを解決することができます。

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とデバイスメタデータを編集する(今日のような)方法はありません。場所を定期的に更新する必要があり、タグを使用したくなかった。だから、私はこのようなhttps://onesignal.com/api/v1playersにPUTリクエストを送っ:

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)); 
関連する問題