我的客户端(React应用程序)和服务器(Node项目)运行在不同的端口上。我尝试从前端向后端发出API请求,并在前端控制台中收到此错误消息:
Access to XMLHttpRequest at 'http://localhost:5000/period' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
字符串
项目相关信息(已更新)
- 客户端端口:3000
- 服务器端口:5000
- 客户端和服务器URL现在都只是localhost
- 客户端React项目是使用VITE建立的。
- 我目前没有在我的React应用程序中使用身份验证,尽管我计划稍后使用
- 我现在也没有使用开发代理
- 我定义API路由的代码:
var mainRouter = require('express').Router();
const {getVersion, getPeriod} = require('../controllers/elementController');
mainRouter.get("/version", getVersion);
mainRouter.get("/period", getPeriod);
module.exports = mainRouter;
型
- 这就是我在React代码中使用
axios
发出API请求的方式:
useEffect(() => {
axios.get(`${import.meta.env.VITE_BASE_URL}:${import.meta.env.VITE_SERVER_PORT}/version`)
.then(res => {
console.log("Versions:")
console.log(res);
});
}, []);
型
我尝试过的事情(更新)
- 安装
cors
模块并确认它已安装到位 - 在我的NodeJS服务器的
index.js
文件中使用cors
:
const express = require('express');
const cors = require("cors");
const app = express();
app.use("/", mainRouter);
app.use(cors({ origin: '*' }));
型
- 我也尝试过:
app.use(cors({ origin: ['*'] }));
个app.use(cors({ origin: 'localhost:3000' }));
个app.use(cors({ origin: ['localhost:3000'] }));
。
所有这些似乎都没有改变什么,即使重新启动客户端和服务器。
3条答案
按热度按时间hc2pp10m1#
我发现了这个问题-我不小心把
app.use(cors({ origin: '*' }));
放在了我的路由器定义(app.use("/", mainRouter);
)之前。改变他们的顺序解决了这个问题。lsmepo6l2#
显示此错误有几个原因。
例如,如果您定义了localhost:3000/API/user并将其调用为localhost:3000/user,则浏览器将显示此错误
bis0qfac3#
请确保已安装
cors
,如果未安装,请使用以下命令安装:字符串
然后:
型