Axios 未发布到 Heroku 上的 Node.js 应用程序

Question

我正在处理我的静态网站的联系页面，通常，它会 post 通过 Heroku 上的 Node.js 应用程序向我发送一封电子邮件。但是，Axios 没有 post 发送电子邮件，因为我没有在 Heroku 的控制台日志中看到它。

现在，我有一个域名 mydomainname.com，链接到我在 Firebase 上的静态网站，而 api。 mydomainname.com，链接到我的 Heroku 应用程序。

我在 '/api/email'、'api.mydomainname.com/api/email' 和 'mydomainname.com/api/email' 之间更改了 Axios.post，但似乎都不起作用。我认为因为我的 Heroku 应用程序和静态网站链接到同一个域名，所以它可以工作。

我要将 Axios.post 配置为什么？

这是我目前拥有的：

相关代码

ContactPage.js

    handleSubmit = (e) => {
        e.preventDefault();
        if (this.validate()) {
            this.setState({
                disabled: true,
                emailSent: null
            });
            Axios.post('api.mydomainname.com/api/email', this.state)
                .then(res => {
                    if(res.data.success) {
                        this.setState({
                            emailSent: true
                        });
                        this.clearForm();
                    } else {
                        this.setState({
                            disabled: false,
                            emailSent: false
                        });
                    }
                })
                .catch(err => {
                    console.log(err);
                    this.setState({
                        disabled: false,
                        emailSent: false
                    });
                })
        }
    }

index.js

const express = require('express'); //Needed to launch server.
const bodyParser = require('body-parser');
const cors = require('cors'); //Needed to disable sendgrid security.
const sendGrid = require('@sendgrid/mail'); //Access SendGrid library to send emails.
sendGrid.setApiKey(process.env.SENDGRID_API_KEY);
const app = express(); //Alias from the express function.

app.use(bodyParser.json());

app.use(cors());

app.use((req, res, next) => {
    res.setHeader('Access-Control-Allow-Origin', '*'); // Change later to only allow our server
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, PATCH, DELETE');
    res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
    next();
});

app.get('/api', (req, res, next) => {
    res.send('API Status: Running');
});

app.post('/api/email', (req, res, next) => {
    console.log(req.body);
    const msg = {
        to: 'my@email.com',
        from: req.body.email,
        subject: req.body.subject,
        text: req.body.message
    }
    sendGrid.send(msg)
        .then(result => {
            res.status(200).json({
                success: true
            });
        })
        .catch(err => {
            console.log('error: ', err);
            res.status(401).json({
                success: false
            });
        });
});

app.listen(process.env.PORT || 4000);

这是我的静态网站控制台。

Answer 1

我最终发现 api.mydomainname.com 的连接不安全，需要 SSL 证书。因此，我将我的域注册到了 Cloudflare。

Axios 未发布到 Heroku 上的 Node.js 应用程序

Axios not posting to Node.js app on Heroku

javascript

heroku

node.js

contact-form

axios

相关代码