I could not deploy my reactJS app with json-server-CodePudding

I have an app that have json-server as a database. I want to deploy it in heroku.So I have created server like this.

const jsonServer = require('json-server');
const server = jsonServer.create();
const router = jsonServer.router('db.json');
const middlewares = jsonServer.defaults({ static: './build' });
const port = process.env.PORT || 8000;
const cors = require('cors');
const corsOptions = {
  origin: '*',
  credentials: true, //access-control-allow-credentials:true
  optionSuccessStatus: 200,
};

server.use(cors(corsOptions));

server.use(middlewares);
server.use(router);

server.listen(port);

I also changed package json file script section.

  "scripts": {
    "start": "concurrently \"react-scripts start\" \"json-server --watch db.json --port 8000 \"",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "proxy": "http://localhost:8000",

I also created Procfile and I added web: node server.js

It is working in local host. But when I deploy it in heroku it is not fetching the data. This is also network get request that doesnt work.

Request URL: http://localhost:8000/cars
Referrer Policy: strict-origin-when-cross-origin
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: https://car-app1.herokuapp.com
Cache-Control: no-cache
Content-Encoding: gzip
Content-Type: application/json; charset=utf-8
Date: Tue, 28 Sep 2021 07:51:14 GMT
ETag: W/"b63-2tPS49o89NSMpXwMALi1soZWiMs"
Expires: -1
Pragma: no-cache
Vary: Origin, Accept-Encoding
X-Content-Type-Options: nosniff
X-Powered-By: Express

CodePudding user response：

Your app is trying to reach localhost. You should change request urls with heroku.

Wrong request: http://localhost:8000/cars

Correct request: https://car-app1.herokuapp.com/cars/