curl 有效，但 React 应用程序抛出在使用 Axios 和 Express 时无法开机自检/错误

Question

我正在尝试实现一个简单的表单来发送电子邮件。我得到的错误是

无法开机自检/

我使用过创建反应应用程序和该应用程序.js如下所示：-

import React, { Component } from 'react';
//import logo from './logo.svg';
import './App.css';
import axios from 'axios';
import renderEmail from 'axios';
import MyEmail from 'axios';
class App extends Component {
state = {
data: null
};
componentDidMount() {
// Call our fetch function below once the component mounts
this.callBackendAPI()
.then(res => this.setState({ data: res.express }))
.catch(err => console.log(err));
}
// Fetches our GET route from the Express server
callBackendAPI = async () => {
const response = await fetch('/express_backend');
const body = await response.json();
if (response.status !== 200) {
throw Error(body.message) 
}
return body;
};

handleSubmit(event){
const messageHtml =  renderEmail(
<MyEmail name={this.state.name}> {this.state.feedback}</MyEmail>
);
axios({
method: "POST", 
url:"http://localhost:3000/send", 
data: {
name: this.state.name,
email: this.state.email,
messageHtml: messageHtml
}
}).then((response)=>{
if (response.data.msg === 'success'){
alert("Email sent, awesome!"); 
this.resetForm()
}else if(response.data.msg === 'fail'){
alert("Oops, something went wrong. Try again")
}
})
}
resetForm(){
this.setState({feedback: ''});
}
render() {
return (
<form id="contact-form" method="POST">
<div className="form-group">
<label htmlFor="name">Name</label>
<input type="text" className="form-control" id="name" />
</div>
<div className="form-group">
<label htmlFor="exampleInputEmail1">Email address</label>
<input type="email" className="form-control" id="email" aria-describedby="emailHelp" />
</div>
<div className="form-group">
<label htmlFor="message">Message</label>
<textarea className="form-control" rows="5" id="message"></textarea>
</div>
<button type="submit" className="btn btn-primary" onClick={this.handleSubmit}>Submit</button>
</form>
);
}
} 
export default App;

服务器.js如下所示：-

const express = require('express');
const app = express();
const port = process.env.PORT || 5000;
var nodemailer = require('nodemailer');
const creds = require('./config'); 
// console.log that your server is up and running
app.listen(port, () => console.log(`Listening on port ${port}`));
// create a GET route
app.get('/express_backend', (req, res) => {
res.send({ express: 'YOUR EXPRESS BACKEND IS CONNECTED TO REACT' });
}); 

var transport = {
host: 'host', // e.g. smtp.gmail.com
//service: 'gmail',
port: 465,
secure: true,
auth: {
user: 'xxxxx',
pass: 'xxxxx'
},
tls: {
// do not fail on invalid certs
rejectUnauthorized: false
}
}   
var transporter = nodemailer.createTransport(transport)
transporter.verify((error, success) => {
if (error) {
console.log(error);
} else {
console.log('All works fine, congratz!');
}
});
app.use(express.json()); 
app.post('/send', (req, res, next) => {
const name = req.body.name
const email = req.body.email
const message = req.body.messageHtml

var mail = {
from: name,
to: '[e-mail]',  
subject: 'Contact form',
html: message
}
transporter.sendMail(mail, (err, data) => {
if (err) {
res.json({
msg: 'fail'
})
} else {
res.json({
msg: 'success'
})
}
})
});

我已经使用 curl 进行了检查，并且 localhost：3000/send 工作正常并返回成功。请帮忙！谢谢。

Answer 1

您是否尝试过在服务器中启用 CORS 以使 React 与后端服务器进行交互？