如何通过React向Express上的mailchimp发送邮寄请求 [英] How to send a post request to mailchimp on express through react

问题描述

我正在尝试从表单发送新的成员身份以响应我的快速服务器以添加到mailchimp成员列表中，但出现cors错误，而且我不知道是否缺少任何代理.我希望用户能够注册react，然后将其发送到mailchimp数据库

I am trying to send a new membership from a form in react to my express server to add to the mailchimp memberlist I am getting a cors error and I don't know if I am missing any proxys. I want a user to be able to sign up in react and then it sends it to the mailchimp database

我已经能够获取会员列表，但不允许发布它:

I have been able to get the members list but I am not allowed to post to it :

这是我的快速后端:

const express = require('express');
const Mailchimp = require('mailchimp-api-v3');
require('dotenv').config();

var request = require('superagent');
var mc_api_key = process.env.REACT_APP_MAILCHIMP_API;
var list_id = process.env.REACT_APP_LIST_ID;

const app = express();

const mailchimp = new Mailchimp(mc_api_key);
const port = process.env.PORT || 5000;

// console.log that your server is up and running
app.listen(port, () => console.log(`Listening on port ${port}`));

app.use((request, response, next) => {
response.header("Access-Control-Allow-Origin", "*");
response.header("Access-Control-Allow-Headers", "Content-Type");
next();
});

// Routes
app.post('/signup', function (req, res) {
request
    .post('https://' + 'us20' + '.api.mailchimp.com/3.0/lists/' + list_id + '/members/')
    .set('Content-Type', 'application/json;charset=utf-8')
    .set('Authorization', 'Basic ' + new Buffer('any:' + mc_api_key ).toString('base64'))
    .send({
      'email_address': req.body.email,
      'status': 'subscribed',
      'merge_fields': {
        'FNAME': req.body.firstName,
        'LNAME': req.body.lastName
      }
    })
        .end(function(err, response) {
          if (response.status < 300 || (response.status === 400 && response.body.title === "Member Exists")) {
            res.send('Signed Up!');
          } else {
            res.send('Sign Up Failed :(');
              }
          });
});

这是我尝试在我的 app.js 文件中获取响应的地方:

This is where I am trying to fetch in react in my app.js file :

onSubmit = (e,email) => {
  e.preventDefault()
  this.setState({user:email})
  fetch('http://localhost:5000/signup',{
    method: 'POST',
    headers: {
      'Accept':'application/json',
      'Content-type':'application/json'
      },
    body: JSON.stringify({email_address: email, status: 'subscribed'})
  }).then(console.log)
};

单击提交时，我希望将成员电子邮件地址发送到mailchimp API，而不是我收到此错误消息:

when clicking submit I expect the members email address to be sent over to the mailchimp API instead I am getting this error :

可从原始位置获取" http://localhost:5000/sign "处的访问权限" http://localhost:3000 "已被CORS政策阻止:对飞行前请求未通过访问控制检查:否'Access-"Control-Allow-Origin"标头出现在请求的资源上.如果不透明的响应可满足您的需求，请将请求的模式设置为"no-cors"以在禁用CORS的情况下获取资源.

Access to fetch at 'http://localhost:5000/signup' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access- Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

推荐答案

尝试一下.

app.use((request, response, next) => {
   response.header("Access-Control-Allow-Origin", "*");
   response.header("Access-Control-Allow-Headers", "Content-Type");
   next();
});

到

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "http://localhost:5000");
  next();
});

这篇关于如何通过React向Express上的mailchimp发送邮寄请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！