Making a call to a local server, smashing two localhost's together? [duplicate]

I'm not sure how to better word this, I am trying to call a login route on my express server to use with my Vue 3 app. They are running on different servers, one on port 5500 (express) and 5173 (vue). In my Vue Login component, I call a function which uses the authStore to contact the express server, where the login logic is being handled. Here is the relevant code:

//authStore.js import { defineStore } from "pinia"; export const useAuthStore = defineStore("authStore", { state: () => ({ token: null, }), actions: { async loginUser(formData) { console.log(formData) try { const headers = { method: "POST", headers: { "Content-Type": "application/json", }, body: formData, } console.log(headers) const res = await fetch("127.0.0.1:5500/apiv1/login", headers); console.log(res) if (res.ok) { const data = await response.json(); this.token = data.token; console.log(data.token) } else { console.log("Unable to login."); } } catch (err) { console.log(err.message); } return true; }, }, }); 

//server.js (Express) const express = require("express"); const app = express(); const pool = require("./sql_db"); const cors = require("cors"); const mongo = require("./mongo_db"); const jwt = require("jsonwebtoken"); const bcrypt = require("bcrypt"); const PORT = process.env.PORT || 5500; //other routes that do work, omitted. async function querySql(statement, values) { const query = await pool.query(statement, values); const results = query.rows; return results; } app.post("/apiv1/login", async (req, res) => { //Get the login creds from the request const { username, password } = req.body; try { //Query the database, similar to above, just searching a different table const loginQuery = 'SELECT * FROM users WHERE username = $1;'; const queryRes = await querySql(loginQuery, [username]); const user = queryRes[0]; //if it doesn't return a user, send 404 (Not Found) if (!user) { res.sendStatus(404); } const storedPass = user.password; const validPassword = await bcrypt.compare(password, storedPass); // if passwords don't match, send 403 (Unauthorised) if (!validPassword) { res.sendStatus(403); } jwt.sign({ user: user.id }, "secretkey", (err, token) => { res.json({ token, }); }); // All good, send 200 (Success) res.sendStatus(200); } catch (error) { console.log(error); //Something else isn't working, log the error and send 500 (internal server error) res.sendStatus(500); } }); 

//Login.vue <script setup> import { RouterLink, useRouter } from 'vue-router'; import { useAuthStore } from '../stores/authStore'; import { ref } from 'vue'; const route = useRouter(); const username = ref(""); const password = ref(""); const authStore = useAuthStore(); function login() { const formData = { username: username.value, password: password.value } if(authStore.loginUser(formData)){ route.push({path: '/', replace: true}) } } </script> <template> <div class="container d-flex flex-column align-items-center justify-content-center h-50"> <h4>some image here</h4> <form @submit.prevent="login()"> <div class="input-group mb-3"> <span class="input-group-text">Username: </span> <div class="form-floating"> <input v-model="username" name="username" type="text" class="form-control" id="floatingUsernameInput" placeholder="Username"> </div> </div> <div class="input-group mb-3"> <span class="input-group-text">Password: </span> <div class="form-floating"> <input v-model="password" name="password" type="password" class="form-control" id="floatingPasswordInput" placeholder="Username"> </div> </div> <div class="row g-3"> <button class="col btn btn-success form-control mx-1">Login</button> <button class="col btn btn-danger form-control mx-1">Reset</button> </div> </form> </div> 

Here is the console output I get, note the URL in the response object:

SQL db, showing the user exists (its all dummy data, passwords are "password" hashed w/bcrypt)