Question

我+ m在使用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错误TypeError：无法获取

Answer 1

问题可能是端点localhost处的onUsernameSubmitted。我们需要有关如何部署应用程序以及如何设计服务器与spa之间的通信的更多详细信息。如果您有Nginx，则可以在此处设置重定向。

Answer 2

我看到错误的三个潜在原因：

必须很好地部署数据库并触发 db:migrate 以定义数据库架构。
如果满足 1)，那么请确保您的 graphql 路径是否指向服务器 url my-app.herokuapp.com 而不是 localhost:<port>，最简单的检查方法是通过浏览器/开发工具/网络查询.
（可选）我使用 ApolloClient，但由于 webpack 中缺少 vars 定义，我的规则 process?.env?.NODE_ENV ? 'prod_url' : 'dev_url' 不起作用：

new DefinePlugin({
    'process.env': {
        NODE_ENV: JSON.stringify(process.env.NODE_ENV),
    },
}),```

Heroku上的React应用无法发出POST请求

2 个答案: