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

Question

我的应用前端是 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/

Answer 1

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

https://databaseapp2020.herokuapp.com/graphql