node.js - Issue with passing data from react front end and node express backend(corse and endpoints)
问题描述
I have an issue where when I submit the form data, I get a 404 error saying my endpoint is not there. (OPTIONS http://localhost:8080/home 404 (Not Found) Please take a look at my server.js file here. I will be wanting to send an email from my node express server when data is passed through to the back end.
const express = require('express');
const bodyParser = require('body-parser')
const path = require('path');
const app = express();
app.use(express.static(path.join(__dirname, 'build')));
const cors = require('cors')
app.use(cors())
app.get('/Home', function (req, res) {
return res.send('home');
});
app.get('/', function (req, res) {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
app.listen(process.env.PORT || 8080);
and here is my onsubmit function
import React, { Component } from 'react';
import './App.css';
import PageOne from './Components/PageOne';
import PageTwo from './Components/PageTwo';
import PageThree from './Components/PageThree';
import PageFour from './Components/PageFour';
import PageFive from './Components/PageFive';
import PageSix from './Components/PageSix';
import {Button, } from 'semantic-ui-react';
import axios from 'axios';
class App extends Component {
constructor(props){
super(props)
this.state={
generalDetails: "Text",
fName: "Text",
mName: "Text",
LName: "Text",
gender: "Text",
}
this.onContentChange = this.onContentChange.bind(this);
this.onSubmitForm = this.onSubmitForm.bind(this);
}
render() {
return (
<div className="App">
<PageOne handleChange={this.onContentChange} />
<PageTwo handleChange={this.onContentChange} />
<PageThree handleChange={this.onContentChange} />
<PageFour handleChange={this.onContentChange} />
<PageFive handleChange={this.onContentChange}/>
<PageSix handleChange={this.onContentChange} />
<Button onClick={this.onSubmitForm} >
Submit Form
</Button>
<br/>
<br/>
</div>
);
}
onSubmitForm(e){
e.preventDefault();
let data = {
generalDetail: this.state.generalDetails,
firstName: this.state.firstName,
middleName: this.state.middleName,
lastName: this.state.lastName
};
axios.post("http://localhost:8080/home", data).then(() => {
//do something
console.log('succesful!', this.state.generalDetails);
}).catch(() => {
console.log("Something went wrong");
});
console.log(
//start of page one
'* general Details: ' ,this.state.generalDetails,
'* First Name: ', this.state.fName,
'* Middle Name: ', this.state.mName,
'* Last Name: ', this.state.lName,
);
}
//end
onContentChange(fieldname, data){
console.log('On Content Change', data);
this.setState({
[fieldname]: data
});
}
}
解决方案
你在做axios.post("http://localhost:8080/home"
但是您的快递服务器正在寻找一个获取请求。将其更改为app.post
推荐阅读
- vue.js - 安装异步 axios 时未更新存储副本
- python - 从数据框中创建逗号分隔列表以传递到 SQL 查询时出错
- docker - Dockerfile 环境变量
- mysql - 从远程机器通过 SSH 的 Docker 命令
- mysql - 如何从 MySQL 中的比较和空检查中指定 ORDER BY?
- sql-server - SQL Server:多部分标识符子查询
- angular - 动态扩展行 ng2-smart-table Angular
- javascript - Firefox 浏览器上带有时区错误的 JavaScript 日期对象
- android - 为什么我无法从 Android Work Profile 中实际存在的路径创建文件?
- java - 将图像上传到 Firebase 时,如何创建将下载 URL 作为字符串返回的方法