如何解决无法使用 React 和 Node.js 通过 Axios 和 Nodemailer 发送 post 请求 - 在开发模式下
我使用 nodemailer 和 axios 设置了我的 react 和 nodejs 应用程序,配置了一个从前端向后端发送数据的请求,但遇到了问题。
首先出现代理错误:无法将请求 /services/moving/appointment/form 从 localhost:3000 代理到 http://127.0.0.1:8000。 (ECONNRESET),虽然我在 frontend 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 通过前端发送 post 请求时,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\""
}
有什么想法吗?
解决方法
使用 axios.post 时出错。您需要在发送请求时提及完整的 URL,即
axios.post(
'http://127.0.0.1:8000/form',this.state
.values
)
.then(() =>
console.log(
'hey'
)
)
还要确保您正确传递数据对象。我建议先创建值的数据对象并在 POST 请求中传递变量
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。