与后端服务通讯

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

线上环境

  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)];
}

results matching ""

    No results matching ""