Bdtjtk

I wrote a small front-end project with Vue.js, and Express was adopted in the back-end. The front-end and back-end were in two different directories respectively. The API works in my local environment but when I deploy my back-end api to Heroku, and tried GET request by Postman, it doesn't work.

In my index.js:

This is the listening port:
const port = process.env.PORT || 5000;

I am using mongoose to connect mLab:
const db = require("./config/keys").mongoURI;

mongoose.connect(db)

And my package.jsonis here:

{

    "name": "backend-api",

    "version": "1.0.0",

    "description": "",

    "main": "server.js",

    "scripts": {

        "start": "node index.js",

        "server": "nodemon index.js"

    },

    "author": "Yeoman_Li",

    "license": "ISC",

    "devDependencies": {

        "body-parser": "^1.18.3",

        "express": "^4.16.4",

        "mongoose": "^5.4.0"

    }

}

My index.js is here:

const express = require("express");

const mongoose = require("mongoose");

const bodyParser = require("body-parser");



const app = express();



// CORS

app.all("*", (req, res, next) => {

    res.header("Access-Control-Allow-Origin", "*");

    res.header("Access-Control-Allow-Methods", "GET, PUT, POST, DELETE, OPTIONS");

    res.header(

        "Access-Control-Allow-Headers",

        "Content-type, Accept, X-Access-Token, X-Key"

    );

    if ("OPTIONS" == req.method) res.status(200).end();

    else next();

});



const mediaReq = require("./routes/api/mediaReq");



//  DB

const db = require("./config/keys").mongoURI;



// body-parser

app.use(bodyParser.urlencoded({ extended: false }));

app.use(bodyParser.json());



//  connect to DB

mongoose

    .connect(db)

    .then(() => console.log("MonogoDB Connected"))

    .catch(err => console.log(err));



//  router

app.use("/api/mediaReq", mediaReq);



// port

const port = process.env.PORT || 5000;



app.listen(port, () => {

    console.log(`Server is running on port ${port}`);

});

And here is my api router:

const express = require("express");

const router = express.Router();



const mediaController = require("../../controllers/media");



//  test

router.get("/test", (req, res) => {

  res.json({ msg: "test works" });

});



// $route GET api/mediaReq/medias || /medias/:id

router.get("/medias", mediaController.allMedia);

router.get("/medias/:id", mediaController.byId);

router.post("/medias", mediaController.create);

router.delete("/medias/:id", mediaController.remove);



module.exports = router;

I used postman to send a simple GET request and it works:
http://localhost:5000/api/mediaReq/medias

But when I tried to send a GET request to my heroku backend-api, it doesn't work:
https://fast-reaches-23458.herokuapp.com/api/mediaReq/medias