I previously had this code in a different question, but since they are not unrelated, I decided to move it to a new one...
Here I am again with the same code, but facing a different issue. My application is set up and running on an express server with a proxy to communicate with the API server. Below is an outline of my code:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Is That Legit?</title>
<link rel="stylesheet" href="assets/main.css">
</head>
<body>
<div id="app">
<div class="wrapper">
<header>
<img alt="Site logo" class="logo" src="assets/logo.svg" width="333" height="187" />
</header>
<h1 class="app-title">Is User Legit</h1>
<input @input="saveID" placeholder="User ID" />
<button @click="checkID">Check Customer is Legit</button>
</div>
</div>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4e383b2b0e7d607a6077">[email protected]</a>/dist/vue.global.js" defer></script>
<script src="app.js" defer></script>
</body>
</html>
My App.js follows a fairly standard setup like this:
const app = Vue.createApp({
data() {
return {
customerID: ''
}
},
methods: {
saveID(event) {
this.customerID = event.target.value;
},
async checkID() {
const options = {
method: 'GET',
headers: {
Accept: 'application/json',
'x-api-key': 'ThisIsMyAPIKeyThereIsNoOtherLikeIt'
}
}
const url = `/checkCustomer?customerNumber=${this.customerID}`;
try {
const result = await fetch(url, options);
const json = await result.json();
console.log(json);
} catch (error) {
console.error(error);
}
},
}
})
app.mount('#app')
Below is my server.js file (powered by ExpressJS) as well...
const express = require('express');
const https = require('https');
const cors = require('cors');
const { createProxyMiddleware } = require('http-proxy-middleware');
const fs = require('fs');
const app = express();
// app.use(cors());
app.use(express.static('dist'));
app.use('/dist', (req, res) => {
res.sendFile(__dirname + 'dist/index.html');
});
app.use('/dist/assets/main.css', (req, res) => {
res.sendFile(__dirname + 'dist/assets/main.css');
});
app.use(express.json());
app.use(
cors({
origin: ['https://myAPI.com'],
methods: ['GET', 'POST', 'PUT', 'DELETE'],
allowedHeaders: ['Content-Type', 'Authorization'],
})
);
app.use(function (req, res) {
res.header('Access-Control-Allow-Origin', '*')
res.header('Access-Control-Allow-Headers', 'X-Requested-With')
});
// Add middleware for http proxy
const options = {
target: 'https://myAPI.com', // target host
pathRewrite: {
'^/checkCustomer' : ''
},
router: {
'localhost:3000': 'https://myAPI.com',
},
};
const apiProxy = (req, res) => {
createProxyMiddleware(options);
}
app.use('/checkCustomer', apiProxy);
https.createServer(
{
key: fs.readFileSync("thisIsMyServerKey.key"),
cert: fs.readFileSync("thisIsMyServerCert.cert"),
},
app
).listen(3000, () => {
console.log('Listening on: https://localhost:3000');
});
When I run npm run start to start my server.js, there doesn't seem to be any issues. The goal is to enter a customer ID in the input box and click the "Are They Legit?" button to verify if a customer is legitimate or not. The proxy steps in to check the /checkCustomer endpoint, remove that part, append the rest of the URL to the API URL, and submit the request.
However, it seems that the request never completes as expected.
The current configuration is set up to address CORS-related problems.
I have tried looking through articles, questions on StackOverflow, and other solutions from Google, but none have provided the desired outcome so far. This attempt has been the closest to resolving the issue. Could someone provide guidance on how to fix this?