Fetch failed loading: POST "http://localhost:3000/weather"

Question

Terminal Error:

> weather-app@1.0.0 devStart
> nodemon server.js

[nodemon] 2.0.7
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `node server.js`
node:events:355
      throw er; // Unhandled 'error' event
      ^

Error: listen EADDRINUSE: address already in use :::3000
    at Server.setupListenHandle [as _listen2] (node:net:1310:16)
    at listenInCluster (node:net:1358:12)
    at Server.listen (node:net:1445:7)
    at Function.listen (/home/ivan-ilyich/Documents/dev/weather-app/node_modules/express/lib/application.js:618:24)
    at Object. (/home/ivan-ilyich/Documents/dev/weather-app/server.js:22:5)
    at Module._compile (node:internal/modules/cjs/loader:1108:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1137:10)
    at Module.load (node:internal/modules/cjs/loader:973:32)
    at Function.Module._load (node:internal/modules/cjs/loader:813:14)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:76:12)
Emitted 'error' event on Server instance at:
    at emitErrorNT (node:net:1337:8)
    at processTicksAndRejections (node:internal/process/task_queues:81:21) {
  code: 'EADDRINUSE',
  errno: -98,
  syscall: 'listen',
  address: '::',
  port: 3000
}
[nodemon] app crashed - waiting for file changes before starting...
^C
ivan-ilyich@ivan-Ilyich:~/Documents/dev/weather-app$ kill
kill: usage: kill [-s sigspec | -n signum | -sigspec] pid | jobspec ... or kill -l [sigspec]
ivan-ilyich@ivan-Ilyich:~/Documents/dev/weather-app$ stop

Command 'stop' not found, but there are 18 similar ones.

ivan-ilyich@ivan-Ilyich:~/Documents/dev/weather-app$ npm stop devStart
npm ERR! missing script: stop

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/ivan-ilyich/.npm/_logs/2021-02-26T14_02_05_736Z-debug.log
ivan-ilyich@ivan-Ilyich:~/Documents/dev/weather-app$ ^C
ivan-ilyich@ivan-Ilyich:~/Documents/dev/weather-app$ ^C
ivan-ilyich@ivan-Ilyich:~/Documents/dev/weather-app$ npm run devStart

> weather-app@1.0.0 devStart
> nodemon server.js

[nodemon] 2.0.7
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `node server.js`
node:events:355
      throw er; // Unhandled 'error' event
      ^

Error: listen EADDRINUSE: address already in use :::3000
    at Server.setupListenHandle [as _listen2] (node:net:1310:16)
    at listenInCluster (node:net:1358:12)
    at Server.listen (node:net:1445:7)
    at Function.listen (/home/ivan-ilyich/Documents/dev/weather-app/node_modules/express/lib/application.js:618:24)
    at Object. (/home/ivan-ilyich/Documents/dev/weather-app/server.js:22:5)
    at Module._compile (node:internal/modules/cjs/loader:1108:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1137:10)
    at Module.load (node:internal/modules/cjs/loader:973:32)
    at Function.Module._load (node:internal/modules/cjs/loader:813:14)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:76:12)
Emitted 'error' event on Server instance at:
    at emitErrorNT (node:net:1337:8)
    at processTicksAndRejections (node:internal/process/task_queues:81:21) {
  code: 'EADDRINUSE',
  errno: -98,
  syscall: 'listen',
  address: '::',
  port: 3000
}
[nodemon] app crashed - waiting for file changes before starting...

I'm new to programming and maybe my question is silly but I didn't found an answer from similar questions so I'll give it a try and post my own(sorry for my bad English, it's not my native language). I'm working on a small tutorial weather app project but I'm forced to make it "my" way and I'm lost with the connection of the server and the client. I keep getting that error: Fetch failed loading: "http://localhost:3000/weather"

Client side:

const searchElement = document.querySelector('[data-city-search]')
const searchBox = new google.maps.places.SearchBox(searchElement)

searchBox.addListener('places_changed', () => {
    const place = searchBox.getPlaces()[0]
    if (place == null) {
        return
    }
    const latitude = place.geometry.location.lat()
    const longitude = place.geometry.location.lng()
    fetch('/weather', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json'
        },
        body: JSON.stringify({
            latitude: latitude,
            longitude: longitude
        })
    })
    .then(res => res.json())
    .then(data => {
        console.log(data);
        // setWeatherData(data, place.formatted_address)
    })
})

Server side:

if ( process.env.NODE_ENV !== 'production' ) {
    require('dotenv').config()
}

const OPEN_WEATHER_API_KEY = process.env.OPEN_WEATHER_API_KEY
const express = require('express')
const app = express()
const axios = require('axios')

app.use(express.json())
app.use(express.static('public'))

app.post('/weather', (req, res) => {
    const url = `api.openweathermap.org/data/2.5/weather?lat=${req.body.lat}&lon=${req.body.lon}&appid=${OPEN_WEATHER_API_KEY}`
    axios({
        url: url,
        responseType: 'json'
    })
    .then(data => res.json(data.main))
})

app.listen(3000, () => {
    console.log('Server Started!');
})

user_10124281 · Answer

Just change fetch('/weather', { as fetch('http://localhost:3000/weather', { You are hosting your api on port 3000 and trying to send a POST request to port 80

Fetch failed loading: POST "http://localhost:3000/weather"

1 Answers