我不明白為什么我的后端無法處理我的域名

Question

everything works fine when i choose localhost:8000 for my axios api calls, but when i choose my domain name hosted by firebase for the api calls it does not get the requests, and returns null for my data

import axios from "axios"
import React, { useEffect, useState } from "react"
import DeleteBlock from "./components/DeleteBlock"

const Dashboard = () => {
//url that axios uses
    axios.defaults.baseURL = **process.env.PORT**

    const [customerData, setCustomerData] = useState(null)


    useEffect(() => {
        async function fetchData() {
        
                const response = await axios.get("/customers")

                const dataObject = response.data.data

                //There is an error here Object i null in production
                const arrayOfKeys = Object?.keys(dataObject)
                const arrayOfData = Object?.keys(dataObject).map(
                    (key) => dataObject[key]
                )
                const formattedArray = []

                //combine key and value to make a usable array
                arrayOfKeys?.forEach((key, index) => {
                    const formattedData = { ...arrayOfData[index] }
                    formattedData["documentId"] = key
                    formattedArray.push(formattedData)
                })

                setCustomerData(formattedArray)
    
        }
        fetchData()
    }, [])


    return (
        <div className="dashboard">
            <div className="container">
                <table id="customers">
                    <tr>
                        <th>Created</th>
                        <th>Last Name</th>
                        <th>First Name</th>
                        <th>Email</th>
                        <th>Phone</th>
                        <th>Zip Code</th>
                        <th>Services</th>
                        <th>X</th>
                    </tr>
                    {customerData?.map((item) => (
                        <tr>
                            <td>{item?.datetime}</td>
                            <td>{item?.lName}</td>
                            <td>{item?.fName}</td>
                            <td>{item?.email}</td>
                            <td>{item?.phoneNumber}</td>
                            <td>{item?.zipCode}</td>
                            <td>{item?.services}</td>
                            <td>
                                <DeleteBlock documentId={item?.documentId} />
                            </td>
                        </tr>
                    ))}
                </table>
            </div>
        </div>
    )
}

export default Dashboard

這是我的 server.js process.env.PORT 是我的域名

const PORT = **process.env.PORT** || 8000
const express = require("express")
const cors = require("cors")


require("dotenv").config()
const axios = require("axios")

const app = express()
app.use(cors())
app.use(express.json())

const url = process.env.URL
const token = process.env.ASTRA_DB_TOKEN


//get all customer
app.get("/customers", async (req, res) => {
    const options = {
        method: "GET",
        headers: {
            Accepts: "application/json",
            "X-Cassandra-Token": token,
        },
    }
    try {
        const response = await axios(`${url}?page-size=20`, options)
        res.status(200).json(response.data)
    } catch (e) {
        console.error(e)
        res.status(500).json({ message: e }) 
    }
})

//create customer
app.post("/customers", async (req, res) => {
    const formData = req.body.formData

    const options = {
        method: "POST",
        headers: {
            Accepts: "application/json",
            "X-Cassandra-Token": token,
            "Content-Type": "application/json",
        },
        data: formData,
    }

    try {
        const response = await axios(url, options)
        res.status(200).json(response.data)
    } catch (e) {
        console.error(e)
        res.status(500).json({ message: e })
    }
})

//edit a ticket
app.put('/customers/:documentId', async (req, res) => {
    const id = req.params.documentId
    const data = req.body.data

    const options = {
      method: 'PUT',
      headers: {
        Accepts: 'application/json',
        'X-Cassandra-Token': token,
      },
      data
    }
  try {
    const response = await axios(`${url}/${id}`, options)
    res.status(200).json(response.data)
  } catch (err) {
    console.log(err)
    res.status(500).json({ message: err })
  }
})

//delete a ticket
app.delete('/customers/:documentId', async (req, res) => {
  const id = req.params.documentId

  const options = {
    method: 'DELETE',
    headers: {
      Accepts: 'application/json',
      'X-Cassandra-Token': token,
    },
  }

  try {
    const response = await axios(`${url}/${id}`, options)
    res.status(200).json(response.data)
  } catch (err) {
    console.log(err)
    res.status(500).json({ message: err })
  }
})


app.listen(PORT, () => console.log(`server running on port ${PORT}`))

這是我的 package.json

{
  "name": "sharp-house-media",
  "version": "0.1.0",
  "proxy": **process.env.PORT**,
  "private": true,
  "scripts": {
    "start:frontend": "react-scripts start",
    "start:backend": "nodemon server.js",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

當我將所有內容更改回 localhost:8000 時它工作正常，我在 console.log() 中看到數據但是當我部署我的應用程序並將所有 localhost:8000 url 更改為我的 process.env.PORT url 時，數據不顯示起來，我這里有什么遺漏嗎？