有没有办法修复网络 204 ReactJS 中的 Restful API 没有内容

Posted 2023-03-03

【中文标题】有没有办法修复网络 204 ReactJS 中的 Restful API 没有内容

【英文标题】：Is there a way to fix network 204 No content with Restful API in ReactJS

【发布时间】：2020-09-13 11:21:30

【问题描述】：

我尝试使用 restful api 和 reactjs 创建简单的联系表单。

当我点击检查器中的发送按钮时，我看到两个请求。

第一个是：

Request URL: http://wwww.localhost:4000/api/v1/
Request Method: POST
Status Code: 200 OK
Remote Address: [::1]:4000
Referrer Policy: no-referrer-when-downgrade

第二个是：

Request URL: http://wwww.localhost:4000/api/v1/
Request Method: OPTIONS
Status Code: 204 No Content
Remote Address: [::1]:4000
Referrer Policy: no-referrer-when-downgrade

在 3 周之前，我在检查器的网络选项卡中只看到一个请求为 200 OK。

我的 App.js 文件如下所示：

import React,  Component  from 'react';
import axios from 'axios';


class Contact extends Component 

    state = 
        name: '',
        message: '',
        email: '',
        username: '',
        password: '',
        sent: false,
        buttonText: 'Send Message'
    

    formSubmit = (e) => 
        e.preventDefault()

        this.setState(
            buttonText: '...sending'
        )

        let data = 
            name: this.state.name,
            email: this.state.email,
            message: this.state.message,
            username: this.state.username,
            password: this.state.password
        

        axios.post("http://wwww.localhost:4000/api/v1/", data)
        .then( res => 
            this.setState( sent: true , this.resetForm())
        )
        .catch( () => 
          console.log('Message not sent')
        )
      

      resetForm = () => 
        this.setState(
            name: '',
            message: '',
            email: '',
            buttonText: 'Message Sent'
        )
    

    render() 
        return(
          <form className="contact-form" onSubmit= (e) => this.formSubmit(e)>
          <label className="message" htmlFor="message-input">Your Message</label>
          <br/>
          <textarea onChange=e => this.setState( message: e.target.value) name="message" className="message-input" type="text" placeholder="Please write your message here" value=this.state.message required/>
          <br/>
          <label className="message-name" htmlFor="message-name">Your Name</label>
          <br/>
          <input onChange=e => this.setState( name: e.target.value) name="name" className="message-name" type="text" placeholder="Your Name" value=this.state.name/>
          <br/>
          <label className="message-email" htmlFor="message-email">Your Email</label>
          <br/>
          <input onChange=(e) => this.setState( email: e.target.value) name="email" className="message-email" type="email" placeholder="[e-mail]" required value=this.state.email />

          <div className="button--container">
              <button type="submit" className="button button-primary"> this.state.buttonText </button>
          </div>
        </form>
        );
    


export default Contact;

我的 Api.js 文件如下所示：

const express = require('express');
const bodyParser = require('body-parser');
const nodemailer = require('nodemailer');
const cors = require('cors');

const app = express();

const port = 4000;

app.use(cors());

app.use(bodyParser.json());
app.use(bodyParser.urlencoded( extended: true ));

app.get('/', (req, res) => 
  res.send('Welcome to my api');
)

app.post('/api/v1/', (req,res) => 
  const  body:  username, password  = req;
  const params = req.params;
  console.log(params)
  var data = req.body;

var smtpTransport = nodemailer.createTransport(
  service: 'Gmail',
  port: 465,
  auth: 
    user: '[e-mail]',
    pass: 'passwordEmail'
  
);

var mailOptions = 
  from: data.email,
  to: '[e-mail]',
  subject: 'New Request',
  html: `<p>$data.name</p>
          <p>$data.email</p>
          <p>$data.message</p>`
;

smtpTransport.sendMail(mailOptions,
(error, response) => 
  if(error) 
    res.send(error)
  else 
    res.send('Success')
  
  smtpTransport.close();
);

)

app.listen(port, () => 
  console.log('We are live on port 4000');
);

所以我不知道 204 没有内容是什么意思.. 但是电子邮件没有发送..

我能提示一下如何解决这个问题吗？

【参考方案1】：

“选项”请求看这个回复How to filter (hide) Pre-flight requests on my Dev Tools Network

但你的问题就在这里

...
  formSubmit = (e) => 
        e.preventDefault()

        this.setState(
            buttonText: '...sending'
        )

        const body = JSON.stringify(
            name: this.state.name,
            email: this.state.email,
            message: this.state.message,
            username: this.state.username,
            password: this.state.password
        )

       return axios.post("http://wwww.localhost:4000/api/v1/", data: body)
        .then(() => this.setState( ...this.resetForm(), sent: true ))
        .catch(console.log)
      

      resetForm = () => (
            name: '',
            message: '',
            email: '',
            buttonText: 'Message Sent'
        );
...

后面也有不少问题