在heroku上部署了我的应用程序但出现错误：加载资源失败：net::ERR_CONNECTION_REFUSED

Posted 2023-03-10

【中文标题】在heroku上部署了我的应用程序但出现错误：加载资源失败：net::ERR_CONNECTION_REFUSED

【英文标题】：Deployed my app on heroku but got error: Failed to load resource: net::ERR_CONNECTION_REFUSED

【发布时间】：2020-04-23 23:54:32

【问题描述】：

我的应用前端是 Reactjs，后端是 Node js。我使用了 express 服务器和 graphql-express 服务器。我成功部署了我的应用程序。但它从加载数据开始，然后什么都没有显示。但是，如果我在本地运行 npm start，那么 heroku 应用程序就会开始工作。

这是我在浏览器中得到的错误

这是我服务器的 json 包文件。如果我在终端运行 npm run dev。它会打开我的 react js 应用。

    
  "name": "backend",
  "version": "1.0.0",
  "description": "personish vol 2",
  "main": "server.js",
  "scripts": 
    "start": "node server.js",
    "server": "node server.js",
    "client": "npm start --prefix client",
    "dev": "concurrently \"npm run server\" \"npm run client\""
  ,
  "author": "Alak",
  "license": "ISC",
  "dependencies": 
    "concurrently": "^5.0.2",
    "cors": "^2.8.5",
    "express": "^4.17.1",
    "express-graphql": "^0.9.0",
    "graphql": "^14.5.8",
    "pg": "^7.15.1",
    "pg-hstore": "^2.3.3",
    "sequelize": "^5.21.3"
  

这是我 react 的 json 包

  "name": "client",
  "version": "0.1.0",
  "private": true,
  "engines": 
    "node": "13.3.0",
    "npm": "6.13.0"
  ,
  "dependencies": 
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "apollo-boost": "^0.4.7",
    "axios": "^0.19.0",
    "firebase": "^7.6.1",
    "graphql": "^14.5.8",
    "pg": "^7.15.1",
    "react": "^16.12.0",
    "react-apollo": "^3.1.3",
    "react-dom": "^16.12.0",
    "react-dropzone": "^10.2.1",
    "react-redux": "^7.1.3",
    "react-redux-firebase": "^3.0.5",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.3.0",
    "redux": "^4.0.4",
    "redux-firestore": "^0.11.0",
    "redux-thunk": "^2.3.0"
  ,
  "scripts": 
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  ,
  "eslintConfig": 
    "extends": "react-app"
  ,
  "browserslist": 
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  

这是我的 express 和 graphql-express 服务器。

const express = require("express");
const app = express();

const graphqlHTTP = require("express-graphql");
const schema = require("./schema");
const cors = require("cors"); 
const path = require("path");

app.use(cors());

app.use(
  "/graphql",
  graphqlHTTP(
    schema,
    pretty: true,
    graphiql: true
  )
);
app.use(express.static(path.join(__dirname, "build")));

app.get("/*", (req, res) => 
  res.sendFile(path.join(__dirname, "build", "index.html"));
);

const port = process.env.PORT || 8081;
app.listen(port, () =>
  console.log(`✅  Example app listening on port $port!`)
);

这是我的 react 应用文件。我使用 Apollo boost 连接 react app 和 node js app。我认为错误来自这里，不知道如何解决它

import React from "react";
import  ApolloClient, HttpLink, InMemoryCache  from "apollo-boost";
import  ApolloProvider  from "react-apollo";
const client = new ApolloClient(
  link: new HttpLink(
    uri: "http://localhost:8081/graphql"
  ),
  cache: new InMemoryCache()
);

这是我的 Heroku 应用

https://databaseapp2020.herokuapp.com/

【问题讨论】：

您的“ERR_CONNECTION_REFUSED”表明您正在尝试连接到“localhost:8081”。

我知道问题所在，但不知道解决方案。我应该使用公共 ip 而不是本地主机吗？例如：192.168.0.0:8081/graphql

【参考方案1】：

你的 heroku dyno/app 会有一个名字，你可以用它来访问你的 graphql，比如说你的笔记本电脑上的 graphiql 游乐场，或者你的 react-app...如果你的 heroku 应用程序实际上被命名为 databaseapp2020 并且正在运行，那么你假设您的 cors 在 dyno 环境变量中正确设置，将使用以下内容

https://databaseapp2020.herokuapp.com/graphql

【讨论】：

我不确定这是代码问题，heroku 日志是否告诉您您的应用程序运行正常？如果是这样，您应该将 uri:"localhost:8081/graphql" 替换为 uri:"databaseapp2020.herokuapp.com/graphql"... 但是如果您无法点击我在上面发布的链接，那么您的应用程序没有运行，如果它不会运行允许您访问时出现 cors 错误，那么您需要授予适当的权限

当应用程序运行并设置 cors 时，databaseapp2020.herokuapp.com/graphql 将带您进入 graphiql 游乐场屏幕