通配符,但出现 CORS 通配符错误"/>
没有使用 CORS 通配符,但出现 CORS 通配符错误
我正在使用 node、express、Vue3 开发网络应用程序
我正在尝试将表单发布到我的路由器上的端点“/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, …}
在浏览器控制台中,它显示好像我正在尝试发出获取请求,尽管事实上我没有,正如您在此处看到的那样。
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);
});
正如您所看到的,我在发布请求中使用了整个 url,这是另一天的一个单独的小问题,但直到现在才解决。
此外,我可以在我的 VScode 控制台中看到请求显示为帖子
[Server] Received POST request at /matchpost
[Server] [2023-05-16T02:43:44.097Z] Request to Match Router: POST /match/matchpost
很明显,这些不是唯一的问题,但我怀疑它们源于 CORS 错误,该错误告诉我我不能将通配符与凭据一起使用。问题是我没有尽我所能使用通配符。
(浏览器请求头确实显示了通配符)
我已经尝试广泛搜索遇到过这个问题的人,但我没有找到遇到同样问题的人。
我尝试了各种不同的 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);
我很乐意根据要求提供更多信息。我已经尝试包含您可能需要的任何内容,但由于我不知道实际问题是什么,所以我可能会漏掉一些东西。
感谢您的帮助!
回答如下:更多推荐
没有使用 CORS 通配符,但出现 CORS 通配符错误
发布评论