帶有 axios 的 Nodemon 服務器 - 無法發送

Question

我有一個 React 應用程序，在這個應用程序中有一個名為 backend 的文件夾。 該文件夾包含 2 個文件：

Config 通過 nodemailer 包含一個帶有電子郵件和密碼的變量。 Index.js（這是我的服務器應該運行的）有這個：

const path = require("path");
const express = require("express");
const transporter = require("./config");
const dotenv = require("dotenv");
dotenv.config();
const app = express();

const buildPath = path.join(__dirname, "..", "build");
app.use(express.json());
app.use(express.static(buildPath));

app.post("/send", (req, res) => {
  try {
    const mailOptions = {
      from: req.body.email, // sender address
      to: process.env.email, // list of receivers
      subject: req.body.subject, // Subject line
      html: `
      <p>You have a new contact request.</p>
      <h3>Contact Details</h3>
      <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. Try again later",
        });
      } else {
        res.send({
          success: true,
          message: "Thanks for contacting us. We will get back to you shortly",
        });
      }
    });
  } catch (error) {
    res.status(500).send({
      success: false,
      message: "Something went wrong. Try again later",
    });
  }
});

app.listen(3030, () => {
  console.log("server start on port 3030");
});

然后，在不同的文件夾（組件）中，我有一個組件文件，它接收表單信息，並且應該將其傳送到服務器：

import React, { useState } from "react";
import axios from "axios";
import { Form, Button } from "react-bootstrap";
import Navbar from "../components/Navbar";
import BottomNav from "../components/BottomNav";

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. Try again later",
        });
      });
  };

  const onInputChange = event => {
    const { name, value } = event.target;

    setState({
      ...state,
      [name]: value,
    });
  };

  return (
    <div>
      <Navbar />
      {result && (
        <p className={`${result.success ? "success" : "error"}`}>
          {result.message}
        </p>
      )}
      <form
        className="phs-form-wrapper mt-8 h-screen flex flex-col items-center "
        onSubmit={sendEmail}
      >
        <Form.Group
          className=" phs-form-group flex flex-col items-center"
          controlId="name"
        >
          <Form.Label className="phs-form-label mr-2">Full Name</Form.Label>
          <Form.Control
            type="text"
            name="name"
            value={state.name}
            onChange={onInputChange}
          />
        </Form.Group>
        <Form.Group
          className=" phs-form-group flex flex-col items-center"
          controlId="email"
        >
          <Form.Label className="phs-form-label mr-2">Email</Form.Label>
          <Form.Control
            type="text"
            name="email"
            value={state.email}
            onChange={onInputChange}
          />
        </Form.Group>
        <Form.Group
          className=" phs-form-group flex flex-col items-center"
          controlId="subject"
        >
          <Form.Label className="phs-form-label mr-2">Subject</Form.Label>
          <Form.Control
            type="text"
            name="subject"
            value={state.subject}
            onChange={onInputChange}
          />
        </Form.Group>
        <Form.Group
          className=" phs-form-group flex flex-col items-center"
          controlId="subject"
        >
          <Form.Label className="phs-form-label mr-2">Message</Form.Label>
          <Form.Control
            as="textarea"
            name="message"
            value={state.message}
            rows="3"
            onChange={onInputChange}
          />
        </Form.Group>
        <Button
          className="phs-form-submit-button bg-black text-white p-4 mt-4"
          variant="primary"
          type="submit"
        >
          Submit
        </Button>
      </form>
      <BottomNav />
    </div>
  );
};

export default Contact;

我在兩台服務器上都收到錯誤消息。 在 localhost:3000 上，每當我嘗試提交信息時，我都會運行我的反應應用程序，我得到：

VM635:1 POST http://localhost:3000/send 404 (Not Found)

在本地主機上：3030：

GET http://localhost:3030/ 404 (Not Found)
localhost/:1 Refused to load the image 'http://localhost:3030/favicon.ico' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.

我注意到我的 axios 有一個 .post("/send") 但我試圖將其更改為 localhost:3030/send 並且也不起作用。

此外，我有 2 個 package.json 文件，一個在我的 react 文件夾（web）中，另一個在我的后端文件夾中。

后端有一個這樣的腳本：

"scripts": {
    "dev": "nodemon src/index.js"
  }

網絡有一個不同的腳本，所以我運行不同的服務器：

"scripts": {
    "start": "npm run watch:css && react-scripts start",
    "build": "npm run watch:css && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "watch:css": "postcss src/assets/tailwind.css -o src/assets/main.css"
  }

有任何想法嗎？

Answer 1

當您在不同的端口上運行后端和前端服務器時（本例中為 :3000 和 :3030），您需要特別提及 axios 調用中的整個 url。 在這種情況下， /send被視為http://localhost:3000 ，其中 POST 方法不存在（您得到 404 的原因）。 您必須進行以下 axios 調用：

const sendEmail = event => {
    event.preventDefault();
    axios
      .post("http://localhost:3030/send", state, {
        headers: { 
         'Access-Control-Allow-Origin' : '*'
        },
      })
      .then(response => {
        ...
      })
      .catch(() => {
        ...
      });
  };

此外，您不需要在 axios 調用中傳播狀態。 原因是 axios 調用接受第二個參數作為對象。

Answer 2

在您的 React 應用程序上，嘗試將其發送到“http://localhost:3030/send”而不是“/send”。 我相信這是因為在本地運行時，您的服務器 URL 和 react dev 服務器 URL 不同