与后端服务通讯

由于采用了前后端完全分离方案，目前前端开发环境是一个单独的环境，实际环境需要和服务器进行通讯，需要解决浏览器跨域问题，下面是线上环境和开发环境的解决方案。

线上环境

1. 采用同一域名，将前端项目部署到服务器项目的目录下

2. 采用不同域名，设置域名白名单

3. 项目单独部署，采用统一域名，使用反向代理服务器进行转发（如Nginx） 【最佳】

开发环境

1. 将前端项目部署到服务器项目的目录下

2. 项目单独运行，保证统一域名，使用反向代理服务器进行转发（如Nginx）

3. 以前端服务器为主，后端服务经由前端服务器转发 【最佳】

采取方案

线上环境为保证服务器安全、减轻服务器压力，采用反向代理服务器转发方式，需要配置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)];
}