APIs 在本地工作，但不在部署的反应应用程序上

Question

I have deployed the admin panel to heroku, the apis working correctly on local but not on heruko. I have been using http://144.76.103.235:5010/admin/api/auth/login for login, but its not working, also not giving any error or warning. The server is currently hosted on ftp server.

here is the heroku log tail

2022-05-17T22:13:45.647119+00:00 heroku[web.1]: Restarting
2022-05-17T22:13:45.663555+00:00 heroku[web.1]: State changed from up to starting
2022-05-17T22:13:46.279939+00:00 heroku[web.1]: Stopping all processes with SIGTERM
2022-05-17T22:13:46.328528+00:00 app[web.1]:
2022-05-17T22:13:46.328538+00:00 app[web.1]: INFO: Gracefully shutting down. Please wait...
2022-05-17T22:13:46.443883+00:00 heroku[web.1]: Process exited with status 143
2022-05-17T22:13:53.145125+00:00 heroku[web.1]: Starting process with command `npm start`
2022-05-17T22:13:54.136688+00:00 app[web.1]:
2022-05-17T22:13:54.136699+00:00 app[web.1]: > autoscan-admin-panel@0.0.1 start
2022-05-17T22:13:54.136700+00:00 app[web.1]: > serve -s build
2022-05-17T22:13:54.136700+00:00 app[web.1]:
2022-05-17T22:13:54.386028+00:00 app[web.1]: INFO: Accepting connections at http://localhost:45373
2022-05-17T22:13:54.765468+00:00 heroku[web.1]: State changed from starting to up
2022-05-17T22:13:58.000000+00:00 app[api]: Build succeeded
2022-05-17T22:14:06.912668+00:00 heroku[router]: at=info method=GET path="/" host=scan-app-admin.herokuapp.com request_id=c8f4ddf7-5788-480e-af79-622ab9d9331c fwd="119.160.3.145" dyno=web.1 connect=0ms service=11ms status=200 bytes=1527 protocol=https
2022-05-17T22:14:07.264071+00:00 heroku[router]: at=info method=GET path="/static/css/main.47b071b3.chunk.css" host=scan-app-admin.herokuapp.com request_id=0c8ed474-4a2c-416f-856f-ac9b1c9c364e fwd="119.160.3.145" dyno=web.1 connect=0ms service=3ms status=304 bytes=85 protocol=https
2022-05-17T22:14:07.274740+00:00 heroku[router]: at=info method=GET path="/static/js/main.9b5b3e47.chunk.js" host=scan-app-admin.herokuapp.com request_id=7ab2fdf6-270f-41c7-bc8a-be3d5d1b679a fwd="119.160.3.145" dyno=web.1 connect=0ms service=9ms status=200 bytes=41303 protocol=https
2022-05-17T22:14:07.311507+00:00 heroku[router]: at=info method=GET path="/static/js/2.7c9ee254.chunk.js" host=scan-app-admin.herokuapp.com request_id=40c7f436-72d4-4691-8238-8a73d3394115 fwd="119.160.3.145" dyno=web.1 connect=0ms service=49ms status=200 bytes=298573 protocol=https
2022-05-17T22:14:08.951134+00:00 heroku[router]: at=info method=GET path="/static/media/showPassword.a1ba73da.svg" host=scan-app-admin.herokuapp.com request_id=b826e546-c4a2-4ac8-9fc0-b3981f3f929e fwd="119.160.3.145" dyno=web.1 connect=0ms service=2ms status=304 bytes=85 protocol=https
2022-05-17T22:14:09.281507+00:00 heroku[router]: at=info method=GET path="/favicon.ico" host=scan-app-admin.herokuapp.com request_id=0a9fefca-1ab5-4737-a10f-01fc9ad4fc45 fwd="119.160.3.145" dyno=web.1 connect=0ms service=2ms status=304 bytes=85 protocol=https
2022-05-17T22:14:10.400133+00:00 heroku[router]: at=info method=GET path="/manifest.json" host=scan-app-admin.herokuapp.com request_id=6b5dc01d-1434-4e87-bcc1-ed24983519ff fwd="119.160.3.145" dyno=web.1 connect=0ms service=2ms status=304 bytes=85 protocol=https
2022-05-17T22:14:10.671324+00:00 heroku[router]: at=info method=GET path="/logo192.png" host=scan-app-admin.herokuapp.com request_id=42bc281f-0bad-45a7-9d9e-a2e89ed6a857 fwd="119.160.3.145" dyno=web.1 connect=0ms service=1ms status=304 bytes=85 protocol=https

package.js

{
  "name": "autoscan-admin-panel",
  "version": "0.0.1",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.12.3",
    "@material-ui/lab": "^4.0.0-alpha.60",
    "@react-google-maps/api": "^2.4.0",
    "@reduxjs/toolkit": "^1.6.1",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@types/jest": "^26.0.15",
    "@types/node": "^12.0.0",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "@types/react-geocode": "^0.2.0",
    "@types/react-redux": "^7.1.18",
    "@zhigamovsky/styled-console-log": "^1.0.0",
    "actions-util": "github:AkeleyUA/actions-util",
    "axios": "^0.21.1",
    "fast-xml-parser": "^4.0.0-beta.8",
    "lodash": "^4.17.21",
    "moment": "^2.29.1",
    "query-string": "^7.0.1",
    "rc-table": "^7.17.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-geocode": "^0.2.3",
    "react-google-places-autocomplete": "^3.3.2",
    "react-modal": "^3.14.3",
    "react-query": "^3.31.0",
    "react-redux": "^7.2.4",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "react-select": "^5.2.1",
    "react-table": "^7.7.0",
    "redux-devtools-extension": "^2.13.9",
    "redux-logger": "^3.0.6",
    "redux-persist": "^6.0.0",
    "redux-saga": "^1.1.3",
    "serve": "^13.0.2",
    "styled-components": "^5.3.0",
    "typescript": "^4.1.2",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "build": "react-scripts build",
    "start": "serve -s build",
    "dev": "react-scripts start",
    "start-lint-disable": "DISABLE_ESLINT_PLUGIN=true  react-scripts start"
  },
  "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"
    ]
  },
  "devDependencies": {
    "@types/lodash": "^4.14.172",
    "@types/react-modal": "^3.13.1",
    "@types/react-router-dom": "^5.1.8",
    "@types/react-table": "^7.7.7",
    "@types/redux-logger": "^3.0.9",
    "@types/styled-components": "^5.1.12",
    "@typescript-eslint/eslint-plugin": "^4.22.0",
    "eslint-config-airbnb-typescript": "^12.3.1",
    "eslint-config-prettier": "^8.2.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-no-loops": "^0.3.0",
    "eslint-plugin-no-use-extend-native": "^0.5.0",
    "eslint-plugin-optimize-regex": "^1.2.0",
    "eslint-plugin-prettier": "^3.4.0",
    "eslint-plugin-promise": "^5.1.0",
    "eslint-plugin-react": "^7.23.2",
    "eslint-plugin-react-hooks": "^4.2.0",
    "eslint-plugin-sonarjs": "^0.6.0",
    "prettier": "^2.2.1"
  }
}

server.js

import * as rateLimit from 'express-rate-limit';
import * as mongoose from 'mongoose';
import * as express from 'express';
import * as helmet from 'helmet';
import * as dotenv from 'dotenv';
import * as morgan from 'morgan';
import * as cors from 'cors';
import * as path from 'path';

import { errorHandler } from './helpers';
import { config } from './config';
import router from './routes';
import './processes';

dotenv.config();

const serverRequestLimit = rateLimit({
  windowMs: config.serverRateLimits.period,
  max: config.serverRateLimits.maxRequests
});

class App {
  public readonly app: express.Application = express();

  constructor() {
    (global as any).appRoot = path.resolve(process.cwd(), './');

    this.app.use(morgan('dev'));
    this.app.use(helmet());
    this.app.use(serverRequestLimit);
    this.app.use(cors());

    this.app.use(express.json());
    this.app.use(express.urlencoded({extended: true}));

    this.mountRoutes();
    this.setupDB();

    this.app.use(errorHandler);
  }

  private setupDB(): void {
    mongoose.connect(config.MONGODB_URL, {
      useNewUrlParser: true,
      useUnifiedTopology: true,
      useFindAndModify: false
    });

    const db = mongoose.connection;
    console.log('connected')
    db.on('error', console.log.bind(console, 'MONGO ERRROR'));
  }

  private configureCors = (origin: any, callback: any) => {
    const whiteList = config.ALLOWED_ORIGIN.split(';');

    if (!origin) { // FOR POSTMAN
      return callback(null, true);
    }

    if (!whiteList.includes(origin)) {
      return callback(new Error('Cors not allowed'), false);
    }

    return callback(null, true);
  }

  private mountRoutes(): void {
    this.app.use('/', router);
    this.app.use('/images', express.static(path.resolve((global as any).appRoot, 'public') ));
  }
}

export const app = new App().app;

Answer 1

Heroku was using https protocol ie https://app.herokuapp.com while my end point was on http protocol, which was blocking the request. Interestingly the heroku app can run on both protocols, So I switched the app url to http ie http://app.herokuapp.com and it started working.