使用Axios提交表单至MongoDB遇跨域错误，Postman正常前端失败

这个报错是浏览器同源策略导致的——浏览器会限制前端脚本跨域请求资源，而Postman这类工具不受同源策略约束，所以能正常请求。解决办法是在后端配置CORS（跨域资源共享），允许前端域名访问接口。

具体步骤： #

1. 安装cors包
   在项目根目录执行命令：

npm install cors

2. 在index.js中引入并启用cors中间件
   修改你的index.js，添加cors相关代码，注意要把中间件挂载在路由之前：

修改后的完整index.js代码：

const express = require("express");
const app = express();
const dotenv = require("dotenv")  
const mongoose = require("mongoose")
const cors = require('cors'); // 引入cors包

//Models
require('./models/User')
//Routes
const userRoute = require("./routes/users")

dotenv.config();
// 解析请求体
app.use(express.json());
// 启用CORS，允许所有域名访问（开发环境可用，生产环境建议指定具体域名）
app.use(cors());

// 若要限制仅特定前端域名访问，可替换为以下配置：
// app.use(cors({
//   origin: 'http://localhost:3000' // 替换成你的前端实际运行端口
// }));

mongoose.set("strictQuery", true);
mongoose.connect(process.env.MONGO_URL, {
    useNewUrlParser:true,
    useUnifiedTopology: true,
})
.then(() => console.log("Connected to MongoDB"))
.catch(err => console.log(err));

app.use("/api/users", userRoute);

app.listen(8000, () => {
    console.log(`Server is running on port 8000.`);
});

3. 重启后端服务
   修改代码后重启Node.js服务，再发起前端请求即可解决跨域问题。

额外说明： #

• cors中间件会自动给响应添加Access-Control-Allow-Origin等必要头信息，让浏览器允许跨域请求。
• 生产环境建议不要用app.use(cors())允许所有域名，而是指定前端实际部署的域名，提升安全性。

内容的提问来源于stack exchange，提问作者GAURI WALKE