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中间件会自动处理。

相关推荐
changflow几秒前
告别“黑盒”等待:如何在 LangGraph 中优雅地实现前端友好的 Human-in-the-Loop?
后端
惜棠11 分钟前
visual code + rust入门指南
开发语言·后端·rust
n***i9511 分钟前
Rust在嵌入式系统中的内存管理
开发语言·后端·rust
k***z1114 分钟前
国产化中间件东方通TongWeb环境安装部署(图文详解)
中间件
7***A44315 分钟前
Vue自然语言处理应用
前端·vue.js·自然语言处理
踏浪无痕16 分钟前
PageHelper 防坑指南:从兜底方案到根治方案
spring boot·后端
高阳言编程32 分钟前
vue2 + node + express + MySQL 5.7 的购物系统
前端
ziwu1 小时前
昆虫识别系统【最新版】Python+TensorFlow+Vue3+Django+人工智能+深度学习+卷积神经网络算法
后端·图像识别
y***54881 小时前
React依赖
前端·react.js·前端框架
2***B4491 小时前
React测试
前端·react.js·前端框架