为什么这封电子邮件发送功能不起作用？

Question

继承我的电子邮件发送功能：

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));
}

我想创建一个只有纯js的电子邮件发送功能，而不是jquery或任何东西。点击发送时出现以下错误：

（忽略我已修复的第一个错误） 我有一个有效的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

编辑2 ：由于端点似乎没有实际返回JSON，我认为您的原始jQuery代码也不正确。您需要对此iftt.com平台以及如何使用它进行更多研究。据我所知，它意味着在移动应用程序中使用，而不是在浏览器中使用 - 那将是一个普通的POST XHR，而CORS不适用于移动应用程序。他们有this页面用于测试端点 - 通知它使用命令行工具curl为您提供示例，其中CORS不再适用。所以我认为你需要重新考虑事情，这项服务不是设计用于浏览器，就像你想要做的那样。

编辑：因为事实证明你实际上是在尝试使用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上的服务器配置为允许从localhost源进行访问。据推测，由于您无法控制该服务器，因此无法进行更改。

在您的情况下，最好的解决方案是通过您自己的服务器向maker.ifttt.com发出请求 - CORS不适用于服务器到服务器的请求。将XmlHttpRequest发送到您的服务器，从请求URL参数中获取有关电子邮件的数据，然后使用该数据向maker.ifttt.com发出请求。