gulp配置代理,解决跨域问题
简单的解决跨域问题,有实时重新加载功能,适用于偶尔改个文件,或者H5活动页上面有简单的前后端交互
npm init
初始化
全局安装gulp npm i gulp -g
本地下载gulp包 npm i gulp --save-dev
下载gulp-webserver包 npm i gulp-webserver --save-dev
新建gulpfile.js
文件
var gulp = require('gulp');
var webserver = require('gulp-webserver');
gulp.task('webserver', function () {
gulp.src('./')
.pipe(webserver({
host: 'localhost',
port: 8888,
livereload: true, // 实时重新加载
open: './index.html', // 启动时默认浏览器打开的文件
directoryListing: {
enable: true,
path: './'
},
proxies: [{
source: '/api',
target: 'http://www.your.com' // 代理的域名
}]
}))
});
// gulp4.0
gulp.task('default', gulp.series(['webserver'], function () {
console.log('gulp webserver start successfully at localhost:8888');
}));
// 因为gulp升级到了4.0,所以使用gulp.series来启动,如果使用的是gulp3.*的话请将上面的代码替换为下面的
// gulp 3.*
gulp.task('default', ['webserver'], function () {
console.log('gulp webserver start successfully at localhost:8888');
});
在项目根目录打开命令窗口,使用命令gulp
启动
使用:
如果接口是https://www.yoururl.com/login/index
则发起请求时使用/api/login/index