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

相关推荐
陈天伟教授3 小时前
人工智能训练师认证教程(2)Python os入门教程
前端·数据库·python
信看4 小时前
NMEA-GNSS-RTK 定位html小工具
前端·javascript·html
Tony Bai4 小时前
【API 设计之道】04 字段掩码模式:让前端决定后端返回什么
前端
苏打水com4 小时前
第十四篇:Day40-42 前端架构设计入门——从“功能实现”到“架构思维”(对标职场“大型项目架构”需求)
前端·架构
king王一帅4 小时前
流式渲染 Incremark、ant-design-x markdown、streammarkdown-vue 全流程方案对比
前端·javascript·人工智能
苏打水com4 小时前
第十八篇:Day52-54 前端跨端开发进阶——从“多端适配”到“跨端统一”(对标职场“全栈化”需求)
前端
Bigger5 小时前
后端拒写接口?前端硬核自救:纯前端实现静态资源下载全链路解析
前端·浏览器·vite
BD_Marathon5 小时前
【JavaWeb】路径问题_前端绝对路径问题
前端