使用gulp相关插件进行api的跨域访问并监控文件的变化的简单处理

关注

原创最新推荐文章于 2026-07-21 13:29:06 发布 1.7k 阅读 AI 写同款· GEO 优化 ›

使用Node.js和Gulp CLI构建前端开发工程 Node.js是一个基于Chrome V8引擎的JavaScript运行环境，它允许我们在服务器端执行JavaScript代码，与传统基于Java的服务器技术形成鲜明对比。Node.js被设计为高度可扩展和非阻塞I/O的，使其非常适合处理大量的并发连接，例如实时应用或网络应用。Node.js的非阻塞I/O模型和事件驱动架构使得它在处理高并发数据流时表现突出，尤其适合I/O密集型的应用场景。这包括社交媒体应用、实时通信平台以及API服务等。阅读详情

跨域处理很麻烦，特别是针对低版本的IE，并且即使做了相关处理，还可能存在安全问题。在开发阶段，我们在不使用工具的情况下以及现代浏览器的环境下，jsonp是一个很好的方式，但是jsonp只能针对get方式的请求，并不完美，这里我们完全可以利用gulp组件进行api的转发处理，以期在开发阶段简单搞定问题。

重要的两款插件介绍

需要的相关依赖

$ npm i -g gulp
$ npm i --save-dev gulp gulp-connect http-proxy-middleware gulp-plumber shelljs run-sequence

关键代码

//引入插件
var gulp = require('gulp');
var connect = require('gulp-connect');
var proxy = require('http-proxy-middleware');
var plumber = require('gulp-plumber');
var sh = require('shelljs');
var runSequence = require('run-sequence');

// 需要监控的路径
var watchPath = ['src'];

// 使用connect启动一个Web服务器
gulp.task('connect', function () {
    connect.server({
        root: '',
        livereload: true,
        port: 9000,
        middleware: function (connect, opt) {
            return [
                proxy(["/api"], {
                    target: '这里写你的服务器api的地址如：192.168.1.100',
                    changeOrigin: true,
                    pathRewrite: {
                        '^/api': '/'
                    }
                })
            ]
        }
    });
});

// 监控文件的变动
gulp.task('watch', function () {
    gulp.watch(watchPath, ['watchCallback']);
});

// 监控的回调reload
gulp.task('watchCallback', function () {
    gulp.src(watchPath)
        .pipe(plumber())
        .pipe(connect.reload());
});

//运行Gulp时,默认的Task
gulp.task('server', function () {
    runSequence(['connect', 'watch'], function () {
       sh.echo("跨域服务器开启!");
    });
});