Express项目解决跨域问题

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

1. 安装cors包

   npm install cors

2. 在应用主文件（如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中间件会自动处理。