无法加载资源：net:: ERR_CONNECTION_REFUSED？赫罗库，阿克西斯

Question

将我的应用程序部署到 Heroku 后，我注意到获取房屋数据的路由不起作用，returns 控制台中出现这些错误 Failed to Load resource: net:: ERR_CONNECTION_REFUSED 并且 Uncaught (in promise) Error: Network error. 该路由正常工作我的本地机器，但不在已部署的应用程序上。我怀疑这可能是一个处理 cors 的问题，但我不确定为什么这一条路线不起作用。

组件


import React, { useEffect, useState } from "react";
// import { useHistory } from 'react-router-dom'
import axios from "axios";
// import BackspaceIcon from '@material-ui/icons/Backspace';
// import FullscreenExitIcon from '@material-ui/icons/FullscreenExit';
import ArrowBackIosIcon from "@material-ui/icons/ArrowBackIos";
import "../StyleSheet/SingleHouse.css";
import placeholder from "../images/placeholder-image.jpg";


import { Link ,withRouter} from "react-router-dom";

const SingleHouse = (props) => {
  // const house_id = window.location.href.split("/")[4];

  // console.log('HOUSE ID: ', house_id);
  //GET HOUSE OBJECT, USESTATE

  const url = `http://localhost:5000/api/house-details/${props.match.params.id}`;
  const [showLoading, setShowLoading] = useState(true)
  
  const [house, setHouses] = useState("");

  

  useEffect(() => {
    const fetchData = async () => {
      const result = await axios(url);
      setHouses(result.data);
      setShowLoading(false);
    };
  
    fetchData();
  }, []);

  async function handleDelete() {
    try {
      await axios.delete(`${url}`);
      props.history.push("/house-sale");
    } catch (error) {
      console.error(error);
    }
  }

  // console.log(house)

  return (
    <div className="HosueDescription__container">
      {house && (
        <div className="HouseDescription__leftContainer">
          {house.isSaleOrRent === "SALE" ? (
            <Link to="/house-sale">
              <ArrowBackIosIcon className="icon" />
            </Link>
          ) : (
            <Link to="/house-rent">
              <ArrowBackIosIcon className="icon" />
            </Link>
          )}
          <div className="houseImg-container">
            <div className="img__container">
              <img
                className="img-fluid"
                src={house.house_image}
                alt="house-image"
              />
            </div>
            <div className="placeholder-container">
              <img
                className="placeholder"
                src={placeholder}
                alt="placeholder-img"
              />
              <img
                className="placeholder"
                src={placeholder}
                alt="placeholder-img"
              />
            </div>
          </div>
          <div className="number_container">
            <h3 className="housePrice">{`$${house.price.toLocaleString(
              navigator.language,
              { minimumFractionDigits: 0 }
            )}`}</h3>
            <h5> {house.numOfBeds} bd |</h5>
            <h5> {house.numOfBaths} ba |</h5>
            <h5>
              {" "}
              {house.squarefeet.toLocaleString(navigator.language, {
                minimumFractionDigits: 0,
              })}{" "}
              sqft
            </h5>
          </div>

          <div className="houseText">
            <h3 className="houseDetails">{`${
              house.numOfBeds
            } Bedroom house in ${
              house.city.charAt(0).toUpperCase() + house.city.slice(1)
            } for ${house.isSaleOrRent}.`}</h3>

            <h4>
              2423 Duck Creek Road,{" "}
              {house.city.charAt(0).toUpperCase() + house.city.slice(1)},{" "}
              {house.us_state.charAt(0).toUpperCase() + house.us_state.slice(1)}
            </h4>

            <h4>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi
              fugiat autem cumque voluptas? Ratione error reprehenderit delectus
              odio quos iure soluta adipisci fugit, dolores amet neque! Quaerat
              ipsum laborum consectetur rem voluptas, ullam quisquam aut
              eligendi nesciunt culpa ad totam, corporis a! Velit consequatur
              molestias dolor corrupti iure sequi id expedita repellendus
              impedit neque. Impedit cupiditate laboriosam commodi aperiam nobis
              odio sunt, error adipisci atque ex minima nisi dignissimos unde!
              Quod est laudantium, neque dolor atque itaque. Est, dignissimos
              eum.
            </h4>
          </div>
          <Link to={`/edit/${props.match.params.id}`}> <button>Edit House</button></Link> 
          <Link to="/house-sale">
            {" "}
            <button onClick={handleDelete}>Delete House</button>
          </Link>
        </div>
      )}
      <div className="edit-from"></div>
    </div>
  );
};

export default withRouter(SingleHouse)

后端路由

router.get('/api/house-details/:id', async(req, res)=>{

    await House.findById(req.params.id).exec().then(data=>{

        return res.status(200).json(data)
    }).catch(error =>{
        return res.status(400).json(error)
    })
})

server.js


// require("dotenv").config({path: "./.env"});
const express = require("express");
const cors = require('cors')
const app = express()
const path = require('path')
require("dotenv").config()
const bodyParser = require('body-parser')
// const bodyParser = require("body-parser")


//MIDDLEWARE
app.use(cors())

app.use(function(req, res, next) {
    res.header('Access-Control-Allow-Origin', 'http://localhost:5000');
    res.header(
      'Access-Control-Allow-Headers',
      'Origin, X-Requested-With, Content-Type, Accept'
    );
    next();
  });

app.use(bodyParser.json())
// app.use(bodyParser.urlencoded({ extended: true }));

//App Routes files

const houseRouter = require('./Routes/HouseListing/HLRoute')
const houseFetchRoute = require('./Routes/HouseFetchRoutes/HouseFetch')


//App route
app.use(houseRouter)
app.use(houseFetchRoute)

if(process.env.NODE_ENV === "production") {
    app.use(express.static(path.join(__dirname, '/client/build')));

    app.get("*", (req, res)=>{
        res.sendFile(path.join(__dirname, 'client', 'build', 'index.html'));
    })
} else {
    app.get('/', (req, res)=>{
        res.send('API RUNNING')
    })
}


//server entry point
const PORT = process.env.PORT || 5000;

app.listen(PORT, () =>{
    console.log(`Server is runnning on port: ${PORT}`)
})

Answer 1

问题是您正在对 API URL 进行硬编码。您必须根据代码正在运行的环境使用 URL（localhost 开发和生产 API URL 生产）。

如果您使用的是 create-react-app，请检查 the docs on how to define custom environment variables. You can use dotenv-webpack 是否有自定义 Webpack 设置。

代码变为

const url = `${process.env.API_URL}/${props.match.params.id}`

无法加载资源：net:: ERR_CONNECTION_REFUSED？赫罗库，阿克西斯

Failed to Load resource: net:: ERR_CONNECTION_REFUSED? Heroku, Axios

get

heroku

express

reactjs