无法加载资源：net::ERR_CONNECTION_REFUSED？ Heroku，Axios

问题描述

在将我的应用程序部署到 Heroku 后，我注意到获取房屋数据的路线不起作用，并在控制台中返回这些错误 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('/',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}`)
})

解决方法

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

如果您使用 create-react-app，请查看 the docs 以了解如何定义自定义环境变量。如果您有自定义 Webpack 设置，则可以使用 dotenv-webpack。

代码变成

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