在 heroku 上部署后 POST 405（不允许）答案

【问题标题】：POST 405 (Not Allowed) after deploying on heroku在 heroku 上部署后 POST 405（不允许）
【发布时间】：2021-04-16 18:32:17
【问题描述】：

这是我第一次使用 React 和 Node.js 创建一个使用 nodemailer 和 axios 的具有联系表单的 Web 应用程序。一切似乎都在 localhost 上运行，但是，在我将它部署到 heroku 之后，当我尝试使用表单发送电子邮件时，我得到了“POST https://myapp.herokuapp.com/ 405（不允许）”

我的 index.js

const path = require('path');
const express = require('express');
const rateLimit = require("express-rate-limit");
const transporter = require('./config');
const dotenv = require('dotenv');

dotenv.config();

const app = express();



const buildPath = path.join(__dirname, '..', 'build');

const PORT = process.env.PORT || 3030;

app.use(express.json());
app.use(express.static(buildPath));

const limiter = rateLimit({
      windowMs: 30 * 1000, // 30 seconds
      max: 1 // limit each IP to 1 requests per windowMs
});

//  apply to all requests
app.use(limiter);
app.post('/send', (req, res) => {
    try {
        const mailOptions = {
        from: req.body.email,
        to: process.env.email,
        subject: req.body.subject,
        html:
            `<p>New Contact Request</p>
        <h2>Contact Details</h2>
        <ul>
        <li>Name: ${req.body.name}</li>
        <li>Email: ${req.body.email}</li>
        <li>Subject: ${req.body.subject}</li>
        <li>Message: ${req.body.message}</li>
        </ul>
        `
    };
    transporter.sendMail(mailOptions, function (err, info) {
        if (err) {
            res.status(500).send({
                success: false,
                message: 'Something went wrong. Please try again'
            });
        }
        else {
            res.send({
                success: true,
                message: 'Thanks for contacting me. I will get back to you soon'
            });
        }
    });



}
    catch (error) {
    res.status(500).send({
        success: false,
        message: "Something went wrong. Please try again"
    });
  }
});

app.get('/*', function (req, res) {
    res.sendFile(path.join(__dirname, '../build/index.html'), function (err) {
        if (err) {
        res.status(500).send(err)
    }
 })
})

app.listen(PORT, () => {
    console.log(`Server Started at PORT ${PORT}`);
});

我的 emailConfig.js

const nodemailer = require('nodemailer');
const dotenv = require('dotenv');
dotenv.config();

var transporter = nodemailer.createTransport({
    service: 'gmail',
    auth: {
        user: process.env.email,
        pass: process.env.password
    }
});

module.exports = transporter

我的联系人.js

import React, { useState } from 'react';
import './Contact.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Form, Button } from 'react-bootstrap';
import axios from 'axios';

const Contact = () => {
  const [state, setState] = useState({
    name: '',
    email: '',
    subject: '',
    message: ''
  });

  const [result, setResult] = useState(null);


  const sendEmail = event => {
    event.preventDefault();

    axios
     .post('/send', { ...state })
     .then(response => {
       setResult(response.data);
       setState({ name: '', email: '', subject: '', message: '' });
     })
     .catch(() => {
       setResult({ success: false, message: 'Something went wrong. Please try again'});
   });
  };
  const onInputChange = event => {
    const { name, value } = event.target;
    setState({
      ...state,
      [name]: value
    }); 

  };

  return (
    //some html code
  );

};


export default Contact;

我尝试添加一个 Procfile（我的 index.js 在名为 server 的文件夹中）

web: node server/index.js

添加 Procfile 并重新部署后，我什至无法访问该网站，而是出现“GET https://my app.herokuapp.com/ 503 (Service Unavailable)”的错误

【问题讨论】：

你的脚本在本地工作吗？
是的，它可以在本地工作。

标签： node.js reactjs axios http-status-code-405

【解决方案1】：

首先，我面临着一些技术时刻。根据我的经验，我可以说它应该是：

您的 node.js 应用程序应直接托管在 http 和 https 默认端口 80、443 或代理 ex Nginx 后面（您可以选择任何其他）。使用不同的端口时，浏览器会有一些限制。
查看 axios 配置，当您发布以将其发送到您的应用程序 url 时，但没有定义端口。
另一个更原生的选择是使用 react fetch。

这就是我对软件设计的看法，因此请尝试将您的应用程序部署为 api 并通过邮递员调用它，然后从前端的本地副本调用它。

【讨论】：