このメール送信機能が動作しないのはなぜですか？

Question

相続人は私の電子メール送信機能：私は唯一の純粋なJSと機能を送信メールを作成し、いないjQueryのか、何もしたかった

function send() { 
var key = "dJdJekCVAFIqvUJ13DEczZjgIh_4MyeIGEHz2GBYKFe"; 
var message_name = "defender_send_message"; 
var data = {}; 
data.value1 = document.getElementById('textBox').value; 
data.value2 = localStorage.getItem("AdminsEmail"); 
var url = "https://maker.ifttt.com/trigger/" + message_name + "/with/key/" + key; 

var xmlhttp = new XMLHttpRequest(); 
xmlhttp.onreadystatechange = function() { 
    if (xmlhttp.readyState == XMLHttpRequest.DONE) { 
     if (xmlhttp.status == 200) { 
      console.log("Message Sent"); 
     } 
    } 
} 

xmlhttp.open('POST', url, true); 
xmlhttp.responseType = 'json'; 
xmlhttp.send(new FormData(data)); 
} 

。私は、[送信]をクリックしたときに、私は次のエラーを取得：

私が働いていたjqueryの機能を持っていた （私はすでにという固定された第一のエラーを無視する）（しかし、私はそれを取り除く必要がありました）：

var message = localStorage.getItem("Message"); 
console.log(message + localStorage.getItem("AdminsEmail")); 
var key = "dJdJekCVAFIqvUJ13DEczZjgIh_4MyeIGEHz2GBYKFe"; // << YOUR KEY HERE 
var message_name = "defender_send_message"; // << YOUR MESSAGE NAME HERE 
var url = "https://maker.ifttt.com/trigger/" + message_name + "/with/key/" + key; 
$.ajax({ 
    url: url, 
    data: {value1: message, 
     value2: localStorage.getItem("AdminsEmail")}, 
    dataType: "jsonp", 
    complete: function(jqXHR, textStatus) { 
    console.log("Message Sent"); 
    } 
}); 

なぜこの作品と私の他の機能はありませんか？

Answer 1

EDIT 2：エンドポイントが実際にJSONを返さないと思われるので、オリジナルのjQueryコードも正しくないと思います。このiftt.comプラットフォームとその使用方法についてさらに調査する必要があります。私の言うことは、ブラウザではなくモバイルアプリで使用することを意味します。通常のPOST XHRであり、CORSはモバイルアプリには適用されません。彼らはthisページを持っています - コマンドラインツールのcurlを使用した例を示しています。CORSは適用されません。だから私はあなたが物事を再考する必要があると思う、このサービスは、あなたがしようとしているように、ブラウザから使用するように設計されていません。

---

EDIT：それはあなたが実際にJSONPではなく、プレーンXHRを使用しようとしているが判明しているので、すべてを行う必要がjQuery-せずに、サーバのURLでスクリプトタグを作成することを実装すると追加されますURLパラメータを使用して、データを処理するコールバック関数を定義します。 This答えはあなたに解決策を与える必要があります。あなたのケースでは

は、コードは次のようになります。これは私のために動作しないこと

http://www.codeply.com/go/bp/VRCwId81Vr

function foo(data) 
{ 
    // do stuff with JSON 
    console.log(data) 
} 

var script = document.createElement('script'); 
script.src = "https://maker.ifttt.com/trigger/defender_send_message/with/key/"+ 
    "dJdJekCVAFIqvUJ13DEczZjgIh_4MyeIGEHz2GBYKFe?callback=foo"; 

document.getElementsByTagName('head')[0].appendChild(script); 

注意を（が、あなたのコードで、あなたがコンソールに出力Message sentになるだろう、多分あなたはそれが動作していると思いましたか？） - 応答はJSONではありません。ほとんどの場合、エンドポイントはJSONPのために実際に使用されるものではありませんか？

私の答えは、JSONPなしでブラウザで通常のXHRを実行しようとしている場合にのみ適用されます。

---

これは、ブラウザのCross Origin Resource Sharingポリシーのために発生します。あなたのコードはlocalhostでホストされており、XmlHttpRequestを通じてmaker.ifttt.comでホストされているリソースにアクセスしようとしています。これを可能にするために、maker.ifttt.comのサーバは、ローカルホストからのアクセスを許可するように設定する必要があります。おそらく、あなたはそのサーバーを制御しないので、その変更を行うことはできません。

あなたの場合、最善の解決策は、独自のサーバーを介してmaker.ifttt.comにリクエストすることです。CORSはサーバー間要求には適用されません。サーバーにXmlHttpRequestを送信し、要求URLパラメータから電子メールに関するデータを取得し、そのデータを使用してmaker.ifttt.comに要求します。