我正在使用node,express,vue 3开发一个web应用程序
我试图在路由器上的“/match/matchpost”端点上发布一个表单,我已经测试了这个端点,它在过去不工作。我最近完成了SSL的设置,之后我开始得到以下错误
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, …}
在浏览器控制台中,它显示好像我试图发出一个get请求,尽管事实上我没有,正如你在这里看到的。
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);
});
正如你所看到的,我在post请求中使用了整个url,这是一个单独的小问题,但到现在为止已经解决了。
另外,我可以在我的VScode控制台中看到请求显示为post
[Server] Received POST request at /matchpost
[Server] [2023-05-16T02:43:44.097Z] Request to Match Router: POST /match/matchpost
显然,这些不是唯一的问题,但我怀疑他们源于CORS错误,告诉我,我不能使用通配符与凭据。问题是我没有尽我所能使用通配符。
(the浏览器请求标头确实显示通配符)
我试着广泛地搜索遇到过这个问题的人,但我没能找到任何遇到过同样问题的人。
我已经尝试了各种不同的CORS配置,但没有成功。
我有CORS配置的每路由器的基础上,因为我认为也许一个设置是干扰另一个,我把我的CORS配置都到一个文件,并已导入它在需要的地方。
下面是
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;
我是这样导入的
match.use(corsMiddleware);
match.options('*', corsMiddleware);
我很乐意根据要求提供更多的信息。我已经尝试包括你可能需要的任何东西,但由于我不知道实际问题是什么,我可能会遗漏一些东西。
感谢您的任何帮助!
1条答案
按热度按时间dgsult0t1#
在localhost上测试CORS是有问题的。有些情况是行不通的。
然而,在您的例子中,问题是您正在从POST处理程序进行重定向。
当POST响应重定向时,它会作为GET请求重新发送(取决于确切的响应代码)。303将始终重定向为GET。301应该询问用户。)