I've set up my application on an express server with a proxy to communicate with the API server. Here's a snippet 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="b8cecdddf88b968c9681">[email protected]</a>/dist/vue.global.js" defer></script>
<script src="app.js" defer></script>
</body>
</html>
This is how my App.js is structured:
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 built on ExpressJS...
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();
// Rest of the server.js code omitted for brevity
When I run npm run start, my server.js fires up without any issues. However, when I enter a customer ID and click the "Are They Legit?" button, I only see {success: true} in the console without any response data or error indication.
I suspect the issue might be related to CORS as everything seems configured correctly. I've tried various solutions from StackOverflow and Google, but nothing has resolved it. Can someone provide guidance on resolving this issue?