与后端服务通讯
由于采用了前后端完全分离方案,目前前端开发环境是一个单独的环境,实际环境需要和服务器进行通讯,需要解决浏览器跨域问题,下面是线上环境和开发环境的解决方案。
线上环境
- 采用同一域名,将前端项目部署到服务器项目的目录下
- 采用不同域名,设置域名白名单
- 项目单独部署,采用统一域名,使用反向代理服务器进行转发(如Nginx) 【最佳】
开发环境
- 将前端项目部署到服务器项目的目录下
- 项目单独运行,保证统一域名,使用反向代理服务器进行转发(如Nginx)
- 以前端服务器为主,后端服务经由前端服务器转发 【最佳】
采取方案
线上环境为保证服务器安全、减轻服务器压力,采用反向代理服务器转发方式,需要配置Nginx服务器; 开发环境为保证开发效率,减轻开发工作量,采用前端服务器转发方式,需要启动静态服务器、配置转发服务器。
下面是开发环境中,静态服务器的配置和后端通讯解决方案。
gulp-connect-reproxy
使用gulp-connect-reproxy插件启动代理服务器,该插件依托于gulp-connect
var gulp = require("gulp");
var $ = require("gulp-load-plugins")();
/**
* 启动静态服务器和代理服务器
*/
gulp.task("serve:start", function(){
$.connect.server({
root : [config.paths.buildTmp, config.paths.build],
port : 9000,
livereload : true,
/*
* 转发服务器中间件,此处配置为转发所有.do结尾的请求
*/
middleware : function(connect, options){
options.rule = [/.do/];
options.server = "127.0.0.1:8080";
return [new $.connectReproxy(options)];
}
});
serveStarted = true;
})
所有.do结尾的请求,都会转发到127.0.0.1:8080,关键代码:
/*
* 转发服务器中间件,此处配置为转发所有.do结尾的请求
*/
middleware : function(connect, options){
options.rule = [/.do/];
options.server = "127.0.0.1:8080";
return [new $.connectReproxy(options)];
}