为什么我有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}`);
});

我使用node server.ts在文件夹后端运行server.ts，并使用npm start运行angular应用

Answer 1

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

但是，为了在开发和生产期间管理不同的值，您可能需要使用environment.ts and environment.prod.ts

environments/environment.ts:

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

environments/environment.prod.ts:

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

service.ts:

在使用npm run build构建生产版本时，environment.ts将被environment.prod.ts替换，如angular.json中所述(请参阅object 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