当前位置：首页 > news >正文

Express项目解决跨域问题

news 2025/5/15 14:39:13

方法一：使用cors中间件（推荐）

安装cors包
```
npm install cors
```

在应用主文件（如app.js）中配置

var express = require('express');
var cors = require('cors'); // 引入cors
var app = express();// 启用CORS（所有来源）
app.use(cors()); // 全局应用中间件// 如果需限制来源，可配置选项
// app.use(cors({
//   origin: 'http://你的前端域名.com'
// }));app.use('/', require('./routes/index')); // 你的路由文件

方法二：手动设置响应头

在路由处理中直接设置响应头：

router.get('/data', function(req, res, next) {// 设置CORS头res.header('Access-Control-Allow-Origin', '*');res.header('Access-Control-Allow-Methods', 'GET');res.header('Access-Control-Allow-Headers', 'Content-Type');const sampleData = { /* 你的数据 */ };res.json(sampleData);
});

开发环境：推荐使用cors()默认配置（允许所有来源），简单快捷。

生产环境：建议通过origin参数限制允许的域名，提升安全性。

修改后的代码示例（使用cors中间件）

var express = require('express');
var router = express.Router();
const cors = require('cors'); // 引入cors/* GET home page. */
router.get('/', function(req, res, next) {res.render('index', { title: 'Express' });
});// 新增接口并应用cors（或在全局应用）
router.get('/data', cors(), function(req, res, next) { const sampleData = {message: "这是返回的数据",items: [{ id: 1, name: "苹果", img: 'http://www.xxx.cn/assets/itemImg16-CZsyuSuW.jpg' },{ id: 2, name: "香蕉", img: 'http://www.xxx.cn/assets/itemImg16-CZsyuSuW.jpg' },{ id: 3, name: "橙子", img: 'http://www.xxx.cn/assets/itemImg14-CwjapHdU.jpg' }],timestamp: new Date().toISOString()};res.json(sampleData);
});module.exports = router;