express - CORS 问题 vue/express/axios

Question

我有一个使用 ExpressJS api 的 VueJS 应用程序。尝试从前端登录页面表单中点击快速路由以通过 SendGrid 发送“联系我们”电子邮件，但在 heroku 上的生产中遇到代理错误。

这是我的组件中的方法：

 async sendContactMessage() {
      console.log('email valid? ', this.validateEmail(this.contactEmail))
      if (!this.validateEmail(this.contactEmail)) {
        this.contactNotice = "Please enter a valid email."
      }
      
      else if (this.contactMessage.length < 10) {
        this.contactNotice = " The message is too short"
      } else {
        await MailersService.sendMessage({
          email: this.contactEmail,
          message: this.contactMessage
        })
        this.showContact = false
      }
    },

这是 MailersService 中的 api 调用：

sendMessage (params) {
    let response = axios.post('/contacts/question', params)
    if (response.status === 200) {
      return response.data;
    }
  }

在快递方面，这是我发布的路线：

router.post('/question', async (req, res, next) => {
  console.log('in Express, sending mail from contact form. this is request: ', req)
  let newMessage = req.body
  console.log("new message object is: ", newMessage)
  const msg = {
    to: '[e-mail]',
    from: req.body.email, // Use the email address or domain you verified above
    subject: 'Message from Beta Signup Form',
    text: req.body.message
  };
  await sgMail.send(msg);

  res.json({
    success: true, message: 'ok' 
  });   // respond back to request
});

在 app.js for cors 中，我有：

app.use(cors());
app.use( function (req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
})

这在本地有效，但在 Heroku 上，它会引发错误：

Access to XMLHttpRequest at 'https://...-api.herokuapp.com/api/contacts/question' from origin 'https://....com' 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.

标签： expressherokuaxioscors