CORS发出vue / express / axios

编程问答 2022-08-23

问题描述

我有一个使用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;
    }
  }

在Express端，这是我要发布的路线：

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: '[email protected]',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
});

在cors的app.js中，我有：

app.use(cors());
app.use( function (req,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.

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

axioscorscorsexpressherokuheroku