0

我正在使用 Chatkit API，当在我的本地机器上运行 React 应用程序时，一切似乎都运行良好，但是当我将它推送到 Heroku 时，每次它尝试通过服务器发出 POST 请求时，它都会失败加载资源：net::ERR_CONNECTION_REFUSED 和 index.js:1375 错误类型错误：无法获取

这是我的 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: Failed to fetch

4

2 回答 2

1

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

于 2019-07-07T20:37:09.990 回答
0

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

  1. 必须很好地部署数据库并触发 db:migrate 以定义 db 模式。
  2. 如果1)满足，则确保您的 graphql 路径是否指向服务器 url ，而my-app.herokuapp.com不是localhost:<port>，最简单的检查方法是通过 browser/devtools/network 查询。
  3. （可选）我使用 ApolloClient 并且我的规则process?.env?.NODE_ENV ? 'prod_url' : 'dev_url'不起作用，因为 webpack 中缺少 vars 定义：
new DefinePlugin({
    'process.env': {
        NODE_ENV: JSON.stringify(process.env.NODE_ENV),
    },
}),```
于 2021-02-07T13:49:31.890 回答