方法一:使用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;
注意事项
-
如果前端仍遇到跨域问题,请检查浏览器控制台错误信息,确认响应头是否正确携带
Access-Control-Allow-Origin
。 -
预检请求(如POST带有特定头)需处理
OPTIONS
方法,使用cors中间件会自动处理。