Почему у меня ошибка 404 (Angular 2 и Node js)

Question

У меня есть форма на моем сайте, и я хочу отправлять данные из полей на свою электронную почту. Для этого я использую nodemailer и node js. Но когда я отправляю форму, у меня появляется ошибка 404 при запросе POST. form-component:

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

server.ts: (path: backend / server.ts) backend папки находится рядом с папкой sr c

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}`);
});

Я запускаю server.ts в бэкэнд папки с помощью node server.ts и запустите приложение angular, используя npm start

Answer 1

Как упоминалось выше в моем комментарии: вам необходимо передать полный URL-адрес вашего бэкенда на post: используйте http://localhost:3000/api/sendForm вместо api/sendForm.

Однако для управления разными значениями во время разработки и production, вы можете использовать environment.ts и environment.prod.ts :

environment / 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 (см. объект 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

Вам необходимо указать полный URL-адрес внутреннего сервера в первом аргументе .post.

Замените 'api/sendForm' на 'Your complete backend url'.

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

, поскольку вы запускаете сервер узла на ПОРТУ 3000. Ваш внутренний URL будет http://localhost:3000/api/sendForm