Javascript 如何使用ReactJS、Axios和Mailchimp发布并获取请求？

我是ReactJS新手，我正在尝试构建这个需要使用mailchimp的应用程序，以便用户可以订阅时事通讯。我需要使用axios发出请求？有人能给我指点迷津吗？我应该把api密钥放在哪里？我在下面的代码中做对了吗？我把我的mailchimps用户名放在“username”中，把我的apikey放在“xxxxxxxxxxxxxxxx-us16”中，然而，我得到了401错误，说是Unauthorized，但我的控制台说Fetch Complete:POST，没有发现任何错误

import React, {Component} from 'react';
import './Subscribe.css';

class Subscribe extends Component {
  sub = () => {
    let authenticationString = btoa('username:xxxxxxxxxxxxxxxxxxx-us16');
    authenticationString = "Basic " + authenticationString;

    fetch('https://us16.api.mailchimp.com/3.0/lists/xxxxxxxxx/members', {
      mode: 'no-cors',
      method: 'POST',
      headers: {
        'Authorization': authenticationString,
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        email_address: "somedude@gmail.com",
        status: "subscribed",
      })
    }).then(function(e){
        console.log('complete')
    }).catch(function(e){
        console.log("fetch error");
    })
  };

  render () {
    return(
      <div>
        <button onClick={this.sub}> subscribe </button>
      </div>
    );
  };
};

import React，{Component}来自'React'；
导入“/Subscribe.css”；
类订阅扩展组件{
子=（）=>{
让authenticationString=btoa（'username:xxxxxxxxxxxxxxxx-us16'）；
authenticationString=“Basic”+authenticationString；
取（'https://us16.api.mailchimp.com/3.0/lists/xxxxxxxxx/members', {
模式：“无cors”，
方法：“POST”，
标题：{
“授权”：authenticationString，
“接受”：“应用程序/json”，
“内容类型”：“应用程序/json”
},
正文：JSON.stringify({
电子邮件地址：somedude@gmail.com",
状态：“已订阅”，
})
}).然后（函数（e）{
console.log（'complete'）
}).catch（函数（e）{
log（“获取错误”）；
})
};
渲染（）{
返回(
订阅
);
};
};

在文档中，curl示例使用了

--user

标志。使用将curl命令转换为等效的js代码时，需要fetch的option对象上的“auth”属性才能使其工作

fetch（'https://us16.api.mailchimp.com/3.0/lists/xxxxxxxxx/members', {
方法：“POST”，
标题：{
“内容类型”：“应用程序/json”
},
正文：JSON.stringify({
电子邮件地址：somedude@gmail.com",
状态：“已订阅”，
},
认证：{
“用户”：“用户名”，
“通行证”：“XXXXXXXXXXXXXXXXX-us16”
})
})

您可以使用此处描述的方法：

您将需要使用

JSONP

，否则将出现CORS错误

如果使用现代环境（我指的不是jQuery），那么可以使用

qs

或

queryString

之类的库将表单数据转换为uri来实现此方法

您的最终url可能类似于：

jsonp(`YOURMAILCHIMP.us10.list-manage.com/subscribe/post-json?u=YOURMAILCHIMPU&${queryString.stringify(formData)}`, { param: 'c' }, (err, data) => {
  console.log(err);
  console.log(data);
});

---

这有点黑客，我想Mailchimp可以从一天到另一天删除它，因为它没有文档记录，所以如果你能避免它，你最好这样做。

我花了一段时间才弄清楚它的语法。这是使用axios在服务器端呈现的reactjs应用程序中使用NodeJ的工作请求的示例

由于401错误，“get”请求似乎不适用于此方法：

MailChimp不支持使用CORS请求的客户端API实现，因为暴露帐户API密钥存在潜在的安全风险。

然而，补丁、put和post似乎工作正常

示例（使用异步/等待）

---

你能解释一下你什么时候想提出请求吗？并为您的问题提供一些示例。请再次检查。您还发布了来自mailchimp的准确错误消息？@dg2903我已更新了代码并删除了不必要的位。你能试试吗？还是401错误。在文档中，他们说：MailChimp不支持使用CORS请求的客户端API实现，因为暴露帐户API密钥存在潜在的安全风险。这与错误有关吗？我是用纯英语写的，我明白了。这是有道理的。在客户端执行此操作将公开API密钥。这应该在你的后台完成。我度假回来后会试试。我相信我可能尝试过这种方法，但它不起作用，也许我做错了什么。文档确实说，他们不再允许我们使用客户端实现进行任何请求调用，它需要一个后端。当我回来的时候，我会再试一次。我在回答之前就试过了，它对我很有效。祝你好运。@TimDau你需要使用这里描述的jsonp。我会更新答案。

// Mailchimp List ID
let mcListId = "xxxxxxxx";

// My Mailchimp API Key
let API_KEY = "xxxxxxxxxxxxxxxxxxxxxxxxxxx-us12";

// Mailchimp identifies users by the md5 has of the lowercase of their email address (for updates / put / patch)
let mailchimpEmailId = md5(values["unsubscribe-email-address"].toLowerCase());

var postData = {
    email_address: "somedude@gmail.com",
    status: "subscribed"
};

// Configure headers
let axiosConfig = {
    headers: {
        'authorization': "Basic " + Buffer.from('randomstring:' + API_KEY).toString('base64'),
        'Accept': 'application/json',
        'Content-Type': 'application/json'
    }
};

try {
    let mcResponse = await axios.post('https://us12.api.mailchimp.com/3.0/lists/' + mcListId + '/members', postData, axiosConfig)
    console.log("Mailchimp List Response: ", mcResponse);

} catch(err) {
    console.log("Mailchimp Error: ", err);
    console.log("Mailchimp Error: ", err["response"]["data"]);
}