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

本文主要是介绍使用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

这篇关于使用gulp相关插件进行api的跨域访问并监控文件的变化的简单处理的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---