使用gulp配置代理，簡單解決前端跨域問題

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