I'm developing a web app using node, express, Vue3
I'm trying to post a form to an endpoint on my router at '/match/matchpost' I've tested this end point and it't worked in the past. I recently finished setting up SSL and after that i began to get 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
matchform:1 Access to XMLHttpRequest at 'https://localhost:5173/' (redirected from 'https://localhost:8080/match/matchpost') from origin 'https://localhost:5173' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
MatchForm.vue:35 AxiosError {message: 'Network Error', name: 'AxiosError', code: 'ERR_NETWORK', config: {…}, request: XMLHttpRequest, …}
In the browser console it's showing as if im trying to make a get request, despite the fact that im not, as you can see here.
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);
});
as you can see im using the whole url in the post request, that's a separate smaller problem for a different day but that has worked up until now.
in addition i can see in my VScode console that the request is showing as a post
[Server] Received POST request at /matchpost
[Server] [2023-05-16T02:43:44.097Z] Request to Match Router: POST /match/matchpost
clearly those are not the only issues but i suspect that they stem from the CORS error that is telling me that I can't use wildcards with credentials. The problem is I'm not using a wildcard as best I can tell.
(the browser request header does show a wildcard by the way)
I have tried searching extensively for people who have come across this problem, but I have failed to find anyone who has had the same problem.
I have tried all manner of different CORS configurations with no success.
I had CORS configured on a per router basis and as i thought perhaps one set up was interfering with another i put my CORS configuration all into one file and have imported it where needed.
here it is below
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;
and here is how I'm importing it.
match.use(corsMiddleware);
match.options('*', corsMiddleware);
I'll be happy to provide any more information upon request. I've tried to include anything you may need but as I'm at a loss to what the actual problem is I may be leaving something out.
Thanks for any help!
