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

相关推荐
sufu106514 分钟前
SpringAI更新:废弃tools方法、正式支持DeepSeek!
人工智能·后端
美酒没故事°23 分钟前
纯css实现蜂窝效果
前端·javascript·css
嘵奇30 分钟前
Spring Boot拦截器详解:原理、实现与应用场景
java·spring boot·后端
GISer_Jing1 小时前
React useState 的同步/异步行为及设计原理解析
前端·javascript·react.js
mini榴莲炸弹1 小时前
什么是SparkONYarn模式?
前端·javascript·ajax
能来帮帮蒟蒻吗1 小时前
VUE3 -综合实践(Mock+Axios+ElementPlus)
前端·javascript·vue.js·笔记·学习·ajax·typescript
酷爱码1 小时前
HTML5中的Microdata与历史记录管理详解
前端·html
开开心心就好1 小时前
高效全能PDF工具,支持OCR识别
java·前端·python·pdf·ocr·maven·jetty
秋野酱2 小时前
基于javaweb的SpringBoot自习室预约系统设计与实现(源码+文档+部署讲解)
java·spring boot·后端
weloveut3 小时前
西门子WinCC Unified PC的GraphQL使用手册
后端·python·graphql