Приложение React на Heroku не может сделать запрос POST - PullRequest
Новая
       17

Приложение React на Heroku не может сделать запрос POST

0 голосов
/ 07 июля 2019

Я играю с Chatkit API, и при запуске приложения React на моем локальном компьютере все работает нормально, но когда я помещал его в Heroku, каждый раз, когда он пытается выполнить запрос POST через сервер, он выдает Не удалось загрузить ресурс: net :: ERR_CONNECTION_REFUSED и index.js: 1375 Ошибка TypeError: Не удалось получить

Это мой server.js 

const express = require('express')
const bodyParser = require('body-parser')
const cors = require('cors')
const Chatkit = require('@pusher/chatkit-server')

const app = express()

const chatkit = new Chatkit.default({
    instanceLocator: I HAVE MY INSTANCE LOCATOR HERE,
    key: I HAVE MY KEY HERE,
  })

app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())
app.use(cors())

app.post('/users', (req, res) => {
    const { username } = req.body
    chatkit
      .createUser({
        id: username,
        name: username
      })
      .then(() => res.sendStatus(201))
      .catch(error => {
        if (error.error === 'services/chatkit/user_already_exists') {
          res.sendStatus(200)
        } else {
          res.status(error.status).json(error)
        }
      })
  })

  app.post('/authenticate', (req, res) => {
    const authData = chatkit.authenticate({ userId: req.query.user_id })
    res.status(authData.status).send(authData.body)
  })

const PORT = 3001
app.listen(PORT, err => {
  if (err) {
    console.error(err)
  } else {
    console.log(`Running on port ${PORT}`)
  }
})

А потом это мой App.js 

import React, { Component } from 'react'
import UsernameForm from './components/UsernameForm'
import ChatScreen from './ChatScreen'

class App extends Component {
  constructor() {
    super()
    this.state = {
      currentUsername: '',
     currentScreen: 'WhatIsYourUsernameScreen'
    }
    this.onUsernameSubmitted = this.onUsernameSubmitted.bind(this)
 }

  onUsernameSubmitted(username) {
    fetch('http://localhost:3001/users', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ username }),
    })
      .then(response => {
        this.setState({
          currentUsername: username,
         currentScreen: 'ChatScreen'
        })
      })
      .catch(error => console.error('error', error))
  }

 render() {
    if (this.state.currentScreen === 'WhatIsYourUsernameScreen') {
      return <UsernameForm onSubmit={this.onUsernameSubmitted} />
    }
    if (this.state.currentScreen === 'ChatScreen') {
      return <ChatScreen currentUsername={this.state.currentUsername} />
    }
  }
}

export default App

Я полагаю, что в это время он ломается 

return <UsernameForm onSubmit={this.onUsernameSubmitted} />

При отправке ожидается, что он сделает запрос POST для создания нового пользователя и React для загрузки нового компонента, но он просто остается в компоненте UsernameForm, и в консоли я вижу следующие ошибки:

Не удалось загрузить ресурс: net :: ERR_CONNECTION_REFUSED index.js: 1375 error TypeError: Не удалось получить

1 Ответ

1 голос
/ 07 июля 2019

Вероятно, проблема заключается в localhost в конечной точке на onUsernameSubmitted.Нам нужны более подробные сведения о том, как развертывается ваше приложение и как устроена связь между сервером и spa.Если у вас есть Nginx, вы можете установить перенаправление там.

...