为什么我有 404 错误(角度 2 和节点 js)

Question

我的网站上有一个表单，我想将数据从字段发送到我的电子邮件。我正在使用nodemailer和node js来做这件事。但是当我提交表格时，我在 POST 请求中出现 404 错误。 表单组件：

this.http.post('api/sendForm',{
to: environment.contactUsEmail,
from: 'zzz',
subject: 'zzz',
mailInfo: contactUsData,
}
).subscribe(() => {
this.cooperationFormGroup.reset();
});

server.ts：(路径：backend/server.ts(文件夹后端靠近文件夹 src

const express = require('express');
const bodyParser = require('body-parser');
const nodemailer = require('nodemailer');
const PORT = process.env.PORT || 3000;
const app = express();
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.post('api/sendForm', (req, res) => {
const payload = req.body;
const mailInfo = payload.mailInfo;
const transporter = nodemailer.createTransport({
service: 'gmail',
host: 'smtp.gmail.com',
secure: 'true',
port: '465',
auth: {
user: 'email', 
pass: 'pass',
}
});
const text = [...];

const mailOptions = {
from: 'zz',
to: payload.to,
subject: payload.subject,
text: text.join('n'),
};
transporter.sendMail(mailOptions, (error, info) => {
if (error) {
console.log(error);
} else {
console.log('Email sent: ' + info.response);
res.status(200).json({
message: 'successfully sent!'
})
}
});
});

app.listen(PORT, () => {
console.log(`Server is running in ${PORT}`);
});

我使用节点服务器.ts在文件夹后端运行server.ts，并使用npm start运行角度应用程序

Answer 1

正如我上面评论中提到的：您需要将后端的完整 URL 传递给post：使用http://localhost:3000/api/sendForm而不是api/sendForm。

但是，要在开发和生产过程中管理不同的值，您可能需要使用 environment.ts 和 environment.prod.ts：

环境/环境.ts：

export const environment = {
production: false,
urlToBackend: 'http://localhost:3000'
}

environment/environment.prod.ts：

export const environment = {
production: true,
urlToBackend: 'http://<IP>:3000'
}

service.ts：

在使用npm run build构建生产版本时，environment.ts将被angular.json中提到的environment.prod.ts所取代(请参阅对象fileReplacements(。

import { environment } from '../../environments/environment';
...
@Injectable()
export class AppService {
url = environment.urlToBackend;
constructor(private http: HttpClient) {
}
foo() {
return this.http.post(`${this.url}/api/sendForm`,{ ... });
}
}

我的代码不准确，您需要根据需要进行安排。但是，我希望你明白这个想法。

Answer 2

您需要在.post的第一个参数中提及完整的后端服务器 URL。

将'api/sendForm'更改为'Your complete backend url'。

this.http.post( 'complete backend server url' ,

因为您正在端口3000上运行节点服务器。您的后端网址将被http://localhost:3000/api/sendForm