javascript - 无法让节点快速服务器运行
问题描述
我想用 express 设置一个节点服务器来运行 nodmailer。我的前端是用 cra 构建的——我认为那个区域没有问题。我的问题是:为什么我的快递服务器不能正常工作?为什么我收到一条错误消息,告诉我“由于访问控制检查,XMLHttpRequest 无法加载 http://localhost:5000/send_mail。”?此脚本中的 fu&%!§g 错误在哪里?
文件夹结构看起来像这样:
- 后端(文件夹)
- .env
- index.js
- 前端(文件夹)
- 公共(子文件夹)
- src(子文件夹)
- index.js
- 应用程序.js
- 邮件程序.js
前端有一个 package.json,后端文件夹有一个。在 express 应用程序中app.listen在控制台中工作,但app.get的 console.log不起作用,浏览器只是显示它无法连接到 localhost:5000。
这是我的后端/ index.js:
const express = require('express');
const dotenv = require('dotenv');
const cors = require('cors');
const nodemailer = require('nodemailer');
const app = express();
require('dotenv').config();
const PORT = process.env.PORT || 5000;
app.use(cors());
app.use(express.urlencoded({ extended: true }));
app.use(express.json());
app.get('/', (req, res) => {
console.log(`this text should be visible in browser`);
res.send('API is running...');
});
app.post('/send_mail', cors(), async (req, res) => {
let { text } = req.body;
const transport = nodemailer.createTransport({
host: process.env.MAIL_HOST,
port: process.env.MAIL_PORT,
auth: {
user: process.env.MAIL_USER,
pass: process.env.MAIL_PASS,
},
});
await transport.sendMail({
from: `${email}`,
to: 'test@test.com',
html: `<div className="email">
<h2>Here is your email!</h2>
<p>${text}</p>
</div>
`,
});
});
app.listen(
(PORT,
() => {
console.log(`Server is listening on port ${PORT}`);
})
);
这是我后端文件夹中的package.json:
{
"name": "backend",
"version": "1.0.0",
"description": "react contact form backend server",
"main": "index.js",
"scripts": {
"watch": "nodemon ./index.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Itsme",
"license": "ISC",
"dependencies": {
"body-parser": "^1.19.0",
"cors": "^2.8.5",
"dotenv": "^8.2.0",
"express": "^4.17.1",
"nodemailer": "^6.6.3",
"nodemon": "^2.0.12"
}
}
附加前端部分: Mailer.js:
import axios from 'axios';
import React, { useState } from 'react';
const Mailer = () => {
const [sent, setSent] = useState(false);
const [text, setText] = useState('');
const handleSend = async (e) => {
setSent(true);
try {
await axios.post('http://localhost:5000/send_mail', {
text,
});
} catch (error) {
console.error(error);
}
};
return (
<div className='Mailer'>
{!sent ? (
<form onSubmit={handleSend}>
<input
type='text'
value={text}
onChange={(e) => setText(e.target.value)}
/>
<button type='submit'>Send</button>
</form>
) : (
<h3>Thanks for your message</h3>
)}
</div>
);
};
export default Mailer;
应用程序.js:
import './App.css';
import Mailer from './Mailer';
function App() {
return (
<div className='App'>
<Mailer />
</div>
);
}
export default App;
谢谢你们的帮助!
解决方案
CORS 阻止您发送 POST 请求,您需要将此代码添加到您的 index.js:
app.use(function(req, res, next) {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
next();
});
推荐阅读
- r - wmf 未使用参数的 ggsave 错误 (bg = "white")
- python - 使用类型提示确保两个函数参数的类型相同
- swift - swiftUI 的新手。有没有办法显示一个空白的 TextField 并带有灰色的数字输入提示
- r - 数据太少,无法分层
- java - 授权标头格式错误;区域“us-east-1”是错误的;期待“us-west-2”
- php - PHP 中此数组声明的差异
- bash - 带有 RTLCSS 钩子的 Codekit
- django - 在 Django 项目中使用 botocore 时出现“/api/chunked_upload/Unicode 对象必须在散列之前编码”错误
- entity-framework - Microsoft 标识本地用户帐户和 MSAL
- python - 二分查找的最长递增子序列