node.js - 无法使用 React 和 Node.js 通过 Axios 和 Nodemailer 发送发布请求

问题描述

我使用nodemailer 和 axios设置了我的 react 和 nodejs 应用程序，配置了从前端到后端发送数据的请求，但遇到了麻烦。

首先是代理错误：无法代理请求 /services/moving/appointment/form 从 localhost:3000 到http://127.0.0.1:8000。（ECONNRESET），虽然我已经写在前端package.json “proxy”：“http://127.0.0.1:8000”。我还尝试在后端 package.json 中使用 CORS 并进行了数十种配置，但均未奏效。

文件结构如下：

现在关于请求。我有一个 ƒorm 页面，它从用户发送数据并发送到后端 - 带有 post 方法的路由“/form”采用 req.body 并放置在 nodemailer 中以发送电子邮件。

当我通过邮递员应用程序直接发布到http://127.0.0.1/form时，一切正常，我收到了电子邮件。

但是，当我使用 axios 通过前端发送发布请求时，Mailtrap 中没有收到电子邮件。

这是处理通过页面发送电子邮件的代码：

import React from 'react'
import axios from 'axios'
import { Redirect } from 'react-router-dom' 

class Form extends React.Component {
    state = {
        values: {
            phoneNumber: '',
            email: '',
            firstName: '',
            lastName: '',
            address: '',
            notes: '',
        },
        isSubmitted: false,
    }
onInputChange = (event) => {
        let values = { ...this.state.values }
       
        for (let key in values) {

            if (event.target.name === key) {
                values[key] = event.target.value
            }
        }

        this.setState(() => {
            return {
                values,
            }
        })
    }


    render() {
        let values = []
        for (let key in this.state.values) {
            values.push(key)
        }

        const formCreating = values.map((field, index) => {
            return (
                <div key={index}>
                    <label>{field}</label>
                    <input
                        type="text"
                        name={field}
                        onChange={this.onInputChange}
                    />
                </div>
            )
        })

        return (
            <div>
                {this.props.allowed ? (
                    <div>
                        <form>
                            {formCreating}

                            <button
                                onClick={() =>
                                    axios
                                        .post(
                                            'form',
                                            this.state
                                                .values
                                        )
                                        .then(() =>
                                            console.log(
                                                'hey'
                                            )
                                        )
                                }
                            >
                                Submit
                            </button>
                        </form>
                    </div>
                ) : (
                    <Redirect to={'/services'} />
                )}
            </div>
        )
    }
}

只是为了节省您的时间：onInputChange 将用户的输入置于状态，然后单击按钮将调用 axios.post(('form'), this.state.events) - 我认为这会发送电子邮件，但它没有吨。

这是我来自后端 package.json 的 npm 脚本：

"scripts": {
        "start": "node server.js",
        "client": "npm run start --prefix frontend",
        "server": "nodemon server.js",
        "dev": "concurrently \"npm run client\" \"npm run server\""
}

有任何想法吗？

标签： node.jsreactjsaxioshttp-postnodemailer

node.js - 无法使用 React 和 Node.js 通过 Axios 和 Nodemailer 发送发布请求 - 处于开发模式

问题描述

解决方案

推荐阅读