Nginx 前后端分离配置

Nginx (engine x) 是一个高性能的HTTP和反向代理服务器

在前后端分离框架设计中，Nginx是一个不错的选择，因为其既可以作为前端HTTP访问器，也可以通过简单配置实现负载，同时也可以通过反向代理配置解决前后端分离的JavaScript跨域问题。

配置Nginx作为前端HTTP访问器，前端页面（*.html）放到html目录下（如果想新增一个访问上下文跟，只需要在此目录下新建一个子目录，比如：html），页面所需要的css、images、js我们放在resources目录下，修改nginx.conf

    server {
        listen       localhost:9999;
        server_name  discovery;
        root /html/html;
        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   html;
            index  default.html;
        }   

        location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|js|css|ico|woff)$
        {
           root d:/nginx-1.13.6/resources;
           access_log  on;
        }

}

默认页default是我们的登陆页，我们都知道前后端分离必须要面对的是JavaScript的跨域问题，我们为了正确获取到访问后续页面的所必须的token，我们通过nginx的反向代理配置，将前端页面请求转发到后端处理，比如：‘/discovery/login’

function login() {
        var login = false;
        $.ajax({
            url: '/discovery/login',
            data: "username=" + $("#username").val() + "&password=" + $("#password").val(),
            type: 'POST',
            contentType: 'application/x-www-form-urlencoded',
            async: false,
            success: function (d) {
                var token = d.data;
                if (token != undefined && token != '') {
                    if(token=="-1"){
                        alert("认证异常");
                        login =false;
                    }else {
                        $.cookie("username", $("#username").val());
                        $.cookie("Authorization", token); 
                        window.location.href = 'index.html';
                        login = true;
                    }
                } else {
                    alert("用户名或密码错误！");
                    login = false;
                }
            }
        });
        return login;
    }

这里是反向代理的相关配置

location ~ /discovery {
     proxy_pass http://ip:port;
}

简化处理，匹配所有的/discovery/**请求。

后端使用SpringBoot微服务框架，在SpringBoot框架下也可以使用FreeMarker整合开发Web应用。