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

相关推荐
前端小巷子9 分钟前
Webpack 5模块联邦
前端·javascript·面试
玲小珑12 分钟前
Next.js 教程系列(十九)图像优化:next/image 与高级技巧
前端·next.js
晓得迷路了12 分钟前
栗子前端技术周刊第 91 期 - 新版 React Compiler 文档、2025 HTML 状态调查、Bun v1.2.19...
前端·javascript·react.js
江城开朗的豌豆19 分钟前
Vue和React中的key:为什么列表渲染必须加这玩意儿?
前端·vue.js·面试
江城开朗的豌豆24 分钟前
前端路由傻傻分不清?route和router的区别,看完这篇别再搞混了!
前端·javascript·vue.js
pengzhuofan27 分钟前
Web开发系列-第0章 Web介绍
前端
小鱼人爱编程36 分钟前
Java基石--反射让你直捣黄龙
前端·spring boot·后端
hqxstudying41 分钟前
J2EE模式---服务层模式
java·数据库·后端·spring·oracle·java-ee
GM_8281 小时前
【最新最完整】SpringAI-1.0.0开发MCP Server,搭建MCP Client 实战笔记(进阶+详细+完整代码)
java·后端·ai编程·springai·mcp
程序员爱钓鱼1 小时前
Go语言实战案例-滑动窗口最大值
后端·google·go