NodeJS 未使用CORS通配符,但出现CORS通配符错误

tv6aics1  于 2023-05-17  发布在  Node.js
关注(0)|答案(1)|浏览(156)

我正在使用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);

我很乐意根据要求提供更多的信息。我已经尝试包括你可能需要的任何东西,但由于我不知道实际问题是什么,我可能会遗漏一些东西。
感谢您的任何帮助!

dgsult0t

dgsult0t1#

在localhost上测试CORS是有问题的。有些情况是行不通的。
然而,在您的例子中,问题是您正在从POST处理程序进行重定向。
当POST响应重定向时,它会作为GET请求重新发送(取决于确切的响应代码)。303将始终重定向为GET。301应该询问用户。)

相关问题