使用gulp相关插件进行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("跨域服务器开启!");
    });
});

开启跨域服务器

  • $ gulp server

测试访问api

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Wang's Blog

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值