代码之家 › 专栏 › 技术社区 › Antonio Pavicevac-Ortiz

Axios。返回后:API调用后的ERR\u EMPTY\u响应

axios reactjs

Antonio Pavicevac-Ortiz · 技术社区 · 7 年前

我做了一个axios post 我的react组件中的请求,它向 twilio 通过服务器上的路由向手机发送短信。

文本消息和有效负载传输成功,但在控制台中打开网络选项卡时,我在一两分钟内收到此错误。

POST http://localhost:8080/api/twilio net::ERR_EMPTY_RESPONSE

有没有办法解决这个问题?

这是我的react组件中的代码:

import React, { Component } from 'react';
import axios from 'axios';
import { Grid, Segment, Form } from 'semantic-ui-react';
import './test.css';

class Test extends Component {
  constructor(props) {
    super(props);
    this.state = { phonenumber: '' };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({ phonenumber: event.target.value });
  }

  handleSubmit() {
    return axios
      .post('/api/twilio', {
        phonenumber: this.state.phonenumber,
      })
      .then(resp => resp.data)
      .catch(error => console.log(error));
  }

  render() {
    const { phonenumber } = this.state;
    console.log('phonenumber', phonenumber);

    return (
      <Grid columns={1} stackable textAlign="center">
        <Grid.Column width={1} />
        <Grid.Column width={14}>
          <Form onSubmit={this.handleSubmit}>
            <Segment stacked>
              <Form.Group id="form-group" inline>
                <label>Phone Number</label>
                <Form.Input onChange={this.handleChange} value={phonenumber} placeholder="+12223334444" />
              </Form.Group>
              <Form.Button id="form-group-button" content="Submit" />
            </Segment>
          </Form>
        </Grid.Column>
        <Grid.Column width={1} />
      </Grid>
    );
  }
}

export default Test;

更新:

这是后端的twilio路由。

const router = require('express').Router();

module.exports = router;

router.post('/', (req, res) => {
  let SID = 'ACc5b16ad0cefc3b514e69bc30636726e2';
  let TOKEN = '3145fb41afe308f22b0b7c647e6a8e17';
  let SENDER = '+18622256079';

  if (!SID || !TOKEN) {
    return res.json({ message: 'add TWILIO_SID and TWILIO_TOKEN to .env file.' });
  }

  let client = require('twilio')(SID, TOKEN);

  client.messages
    .create({
      to: req.body.phonenumber,
      from: SENDER,
      body: 'This is the ship that made the Kessel Run in fourteen parsecs?',
    })
    .then(message => console.log(message.sid));
});

1 回复 | 直到 7 年前

Fabian Schultz 7 年前

在服务器上的路由中,不会向客户端返回任何内容,因为 SID 和 TOKEN 始终定义(至少在您的示例中)。为了确保请求不会失败,您需要在Twilio请求之后至少发送一些响应,例如:

client.messages
  .create({
    to: req.body.phonenumber,
    from: SENDER,
    body: 'This is the ship that made the Kessel Run in fourteen parsecs?'
  })
  .then(message => {
    console.log(message.sid);

    // Either just send an empty, successful response or some data (e.g. the `sid`)
    res.status(200).send(message.sid);
  })
  .catch(err => {
    console.log(err);

    // In case of an error, let the client know as well.
    res.status(500).send(err);
  });