Express项目解决跨域问题

HWL56792025-05-15 12:58

方法一：使用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中间件会自动处理。