I'm currently in the process of developing a web application using node, express, and Vue3
My goal is to submit a form to an endpoint located on my router at '/match/matchpost'. I have previously tested this endpoint successfully. However, after setting up SSL, I started encountering the following errors:
r.js:247 GET https://localhost:5173/ net::ERR_FAILED
dispatchXhrRequest @ xhr.js:247
xhr @ xhr.js:49
dispatchRequest @ dispatchRequest.js:51
request @ Axios.js:142
httpMethod @ Axios.js:181
wrap @ bind.js:5
submitForm @ MatchForm.vue:18
(anonymous) @ MatchForm.vue:78
(anonymous) @ runtime-dom.esm-bundler.js:1483
callWithErrorHandling @ runtime-core.esm-bundler.js:173
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:182
invoker @ runtime-dom.esm-bundler.js:345
...
<p>The browser console seems to be indicating that a GET request is being made, despite my intention to make a POST request as shown here:</p>
<pre><code>axios.post("https://localhost:8080/match/matchpost",{
title: this.title,
game: this.game,
description: this.description,
rules: this.rules,
participantNum: this.participantNum,
},{
headers:{
'Content-Type' : 'application/json'
},
withCredentials: true
})
.then(response => {
console.log(response);
})
.catch(error => {
console.log(error);
});
It appears that these are not the only issues, but most likely stem from the CORS error warning about wildcards and credentials. Despite my efforts to address this issue by avoiding wildcard usage, it persists.
I've extensively researched similar problems and attempted various CORS configurations without success.
I initially configured CORS per router basis, then consolidated all configurations into one file and imported where needed but the problem persists.
Below is the CORS configuration:
const cors = require('cors');
const corsOptions = {
origin: 'https://localhost:5173',
credentials: true,
methods: ['GET', 'POST', 'OPTIONS', 'PUT', 'DELETE', 'HEAD'],
allowedHeaders: ['auth-token', 'Origin', 'X-Requested-With', 'Content-Type', 'Accept'],
preflightContinue: true,
};
const corsMiddleware = cors(corsOptions);
module.exports = corsMiddleware;
Here is how I import the CORS middleware:
match.use(corsMiddleware);
match.options('*', corsMiddleware);
If more information is required, please do not hesitate to ask. I appreciate any assistance or insights you can provide. Thank you!