Metamask is not connecting local network Localhost 8545

I'm building a Web-App using NodeJs. I'm stuck when I tried to connect the local server to metamask. When I try to add new network as mentioned in my. When I try to connect to localhost8545 in chrome extension then it returns this error:

trufle-config.js

var HDWalletProvider = require("truffle-hdwallet-provider");

module.exports = {
  // See <https://truffleframework.com/docs/advanced/configuration>
  // to customize your Truffle configuration!
  networks: {
    development: {
      host: "127.0.0.1",
      network_id: "*", // Match any network id
      port: 8545,
//*      gas: 8000000,
//*      gasprice: 10000000000,
    },
    ropstenInfura: {
      provider: function() {
        return new HDWalletProvider(
          process.env.INFURA_ROPSTEN_MNEMONIC,
          "https://ropsten.infura.io/v3/" + process.env.INFURA_PROJECT_ID
        );
      },
      network_id: "3",
    },
    ropstenLocal: {
      from: "*********************",
      host: "127.0.0.1",
      port: 8545,
      network_id: "*",
      gas: 5000000,
      gasPrice: 10000000000,
    },
    live: {
      from: "*******************",
      host: "127.0.0.1",
      port: 8545,
      network_id: "*",
      gas: 500000,
      gasPrice: 1000000000,
    },
  },
  compilers: {
    solc: {
      version: "0.4.24",
    },
  },
};

Ganache-cli