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

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

重要的两款插件介绍

• gulp-connect
• http-proxy-middleware

需要的相关依赖

• $ 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("跨域服务器开启!");
    });
});

开启跨域服务器

• $ gulp server

测试访问api

• 如果你之前的api地址为：http://192.168.1.100/get
• 现在在访问: http://localhost:9000/api/get
• 两者返回数据相同，后者把跨域问题完全解决了。
• 支持GET, POST, DELETE, PUT等所有method