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

相关推荐
fruge3 小时前
Vue项目中的Electron桌面应用开发实践指南
前端·vue.js·electron
York·Zhang6 小时前
VSCode 插件开发完整指南:从零到发布
ide·vscode·node.js·编辑器
天若有情6737 小时前
【java EE】IDEA 中创建或迁移 Spring 或 Java EE 项目的核心步骤和注意事项
后端·spring·java-ee·intellij-idea
漂流瓶jz8 小时前
Webpack中各种devtool配置的含义与SourceMap生成逻辑
前端·javascript·webpack
前端架构师-老李9 小时前
React 中 useCallback 的基本使用和原理解析
前端·react.js·前端框架
大鱼七成饱9 小时前
💥 从崩溃到稳定:我踩过的 Rust Tokio 线程池坑(含代码示例)
后端
喵个咪9 小时前
开箱即用的GO后台管理系统 Kratos Admin - 站内信
后端·微服务·go
木易 士心9 小时前
CSS 中 `data-status` 的使用详解
前端·css
明月与玄武9 小时前
前端缓存战争:回车与刷新按钮的终极对决!
前端·缓存·回车 vs 点击刷新
牧马少女9 小时前
css 画一个圆角渐变色边框
前端·css