javascript - 尝试设置联系表并收到错误 404
问题描述
我对此很陌生,所以答案可能很明显,但我现在很困惑。我正在为我的 React 应用程序创建一个联系表单,并在单击“提交”时不断收到以下错误消息:
POST http://localhost:3000/contact 404(未找到)
这是我的 Form.jsx 组件:
import React, { Component } from 'react';
import styles from './Form.module.css'
import axios from 'axios';
class Form extends Component {
state = {
name: '',
message: '',
email: '',
sent: false,
buttonText: 'Send Message'
}
formSubmit = (e) => {
e.preventDefault()
this.setState({
buttonText: '...Sending'
})
let data = {
name: this.state.name,
email: this.state.email,
message: this.state.message
}
axios.post('/contact', data)
.then( res => {
this.setState({ sent: true }, this.resetForm())
})
.catch( () => {
console.log('Message not sent')
})
}
resetForm = () => {
this.setState({
name: '',
message: '',
email: '',
buttonText: 'Message Sent'
})
}
render() {
return(
<form
id={styles.contact_form}
className="contact_form"
onSubmit={ (e) => this.formSubmit(e)}
method="POST"
>
<div className={styles.input_group}>
<div className={styles.form_group}>
<input
id="name"
type="text"
placeholder="Name"
className={styles.name_control}
autoComplete="off"
value={this.state.name}
onChange={e => this.setState({ name: e.target.value})} name="name" type="text" />
</div>
</div>
<div className={styles.form_group}>
<input
id="email"
type="email"
placeholder="Email"
className={styles.message_control}
aria-describedby="emailHelp"
autoComplete="off"
value={this.state.email}
onChange={(e) => this.setState({ email: e.target.value})} name="email" type="email" required value={this.state.email} />
</div>
<div className={styles.form_group}>
<textarea
id="message"
className={styles.message_input}
type="text"
placeholder="Message"
rows="5"
onChange={e => this.setState({ message: e.target.value})} name="message" value={this.state.message} required/>
</div>
<div className={styles.buttons}>
<button type="submit" className={styles.blob_btn}>{this.state.buttonText}
<span className={styles.blob_btn__inner}>
<span className={styles.blob_btn__blobs}>
<span className={styles.blob_btn__blob}></span>
<span className={styles.blob_btn__blob}></span>
<span className={styles.blob_btn__blob}></span>
<span className={styles.blob_btn__blob}></span>
</span>
</span>
</button>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="goo">
<feGaussianBlur
in="SourceGraphic"
result="blur"
stdDeviation="10"
></feGaussianBlur>
<feColorMatrix
in="blur"
mode="matrix"
values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 21 -7"
result="goo"
></feColorMatrix>
<feBlend in2="goo" in="SourceGraphic" result="mix"></feBlend>
</filter>
</defs>
</svg>
</form>
);
}
}
export default Form;
这是我的 server.js:
const express = require('express');
const bodyParser = require('body-parser');
const nodemailer = require('nodemailer');
const cors = require('cors');
const app = express();
const port = 4444;
if (process.env.NODE_ENV !== 'production') {
require('dotenv').config();
}
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(cors());
app.listen(port, () => {
console.log('We are live on port 4444');
});
app.get('/', (req, res) => {
res.send('Welcome to my api');
})
app.post('/api/v1', (req,res) => {
var data = req.body;
let smtpTransport = nodemailer.createTransport({
service: 'Gmail',
port: 465,
auth: {
user: `${process.env.GMAIL_USER}`,
pass: `${process.env.GMAIL_PASS}`
}
});
let mailOptions = {
from: data.email,
to: `${process.env.GMAIL_USER}`,
subject: 'Portfolio Inquiry',
html: `<p>${data.name}</p>
<p>${data.email}</p>
<p>${data.message}</p>`
};
smtpTransport.sendMail(mailOptions,
(error, response) => {
if(error) {
res.send(error)
}else {
res.send('Success')
}
smtpTransport.close();
});
})
我怀疑问题出在这一行的 form.jsx 组件中:
axios.post('/contact', data)
.then( res => {
this.setState({ sent: true }, this.resetForm())
})
非常感谢!
解决方案
您还没有/contact
在 server.js 中创建 API
因为您在 Node-Express 服务器中将端口设置为 4444。
你的 URL 是 ` http://localhost:4444/api/v1 '
您的发布请求应如下所示:
let data = {
name: this.state.name,
email: this.state.email,
message: this.state.message
}
axios.post('http://localhost:4444/api/v1', data)
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
推荐阅读
- bash - 使用 bash 删除部分文件名
- oracle - 在 oracle 11G 中创建可以访问多个 Schema 的超级用户
- api - 成功登录后的 Azure AD B2C 重定向循环
- java - 如何从数据库(表)中获取计数并链接到 jsp 页面?
- css - 具有 flex-direction 列的父容器和具有 flex-direction 行的子容器
- python - 蛮力函数 SHA256 哈希
- ios - 将 UIImageView 添加到 ARSCNView 场景背景会导致饱和度/色调关闭
- vba - 访问问题中的VBA,字段被识别
- python - Python 只读取手动创建的文件
- image - 如何比较2张tiff图片的差异,生成新的tiff图片,并标注差异