前端加分技能--Nginx

工作中，因为作业平台和語言的缘故，绝大多数前端工程师者，偏重于用Nodejs来架设服务器，从而保持一些要求，对Nginx有纯天然的抵触感。确实，Nginx中的绝大多数作用，假如单纯性的应用Node.js也可以满足和实现。但实际上，Nginx和Node.js并不冲突，都有自己擅长的领域：Nginx更擅长于底层服务器端资源的处理（静态资源处理转发、反向代理，负载均衡等），Node.js更擅长于上层具体业务逻辑的处理。两者可以实现完美组合，助力前端开发。

nginx在应用程序中的作用

• 解决跨域
• 请求过滤
• 配置gzip
• 负载均衡
• 静态资源服务器

对于前端开发者的角色来说，我们只需要关注在解决跨域上面，因为对于前端项目来说nginx最直接的作用就是解决跨域问题。

先了解一下为什么跨域：

1.浏览器先根据同源策略对前端页面和后台交互地址做匹配，若同源，则直接发送数据请求；若不同源，则发送跨域请求。

2.服务器解析程序收到浏览器跨域请求后，根据自身配置返回对应文件头。若未配置过任何允许跨域，则文件头里不包含Access-Control-Allow-origin字段，若配置过域名，则返回Access-Control-Allow-origin+ 对应配置规则里的域名的方式。

3.浏览器根据接受到的http文件头里的Access-Control-Allow-origin字段做匹配，若无该字段，说明不允许跨域；若有该字段，则对字段内容和当前域名做比对，如果同源，则说明可以跨域，浏览器发送该请求；若不同源，则说明该域名不可跨域，不发送请求

总结一下跨域的原因就是一句话：不同IP或不同端口就是跨域。

Nginx反向代理解决跨域问题

基本配置

配置结构

events {

}

http
{
    server
    {
        location path
        {
            ...
        }
        location path
        {
            ...
        }
     }

    server
    {
        ...
    }

}

• main:nginx的全局配置，对全局生效。
• events:配置影响nginx服务器或与用户的网络连接。
• http：可以嵌套多个server，配置代理，缓存，日志定义等绝大多数功能和第三方模块的配置。
• server：配置虚拟主机的相关参数，一个http中可以有多个server。
• location：配置请求的路由，以及各种页面的处理情况。
• upstream：配置后端服务器具体地址，负载均衡配置不可或缺的部分。

反向代理

在反向代理中（事实上，这种情况基本发生在所有的大型网站的页面请求中），客户端发送的请求，想要访问server服务器上的内容。但将被发送到一个代理服务器proxy，这个代理服务器将把请求代理到和自己属于同一个LAN下的内部服务器上，而用户真正想获得的内容就储存在这些内部服务器上。看到区别了吗，这里proxy服务器代理的并不是客户，而是服务器，即向外部客户端提供了一个统一的代理入口，客户端的请求，都先经过这个proxy服务器，至于在内网真正访问哪台服务器内容，由这个proxy去控制。一般代理是指代理客户端，而这里代理的对象是服务器，这就是“反向”这个词的意思。Nginx就是来充当这个proxy的作用。

概括说：就是代理服务器和真正server服务器可以直接互相访问，属于一个LAN（服务器内网）；代理对用户是透明的，即无感知。不论加不加这个反向代理，用户都是通过相同的请求进行的，且不需要任何额外的操作；代理服务器通过代理内部服务器接受域外客户端的请求，并将请求发送到对应的内部服务器上，也是因此为什么nginx可以用于解决跨域。

nginx解决跨域的原理

例如：

• 前端server的域名为：fe.xxx.com
• 后端服务的域名为：dev.xxx.com

现在我在fe.xxx.com对dev.xxx.com发起请求一定会出现跨域。

现在我们只需要启动一个nginx服务器，将server_name设置为fe.server.com,然后设置相应的location以拦截前端需要跨域的请求，最后将请求代理回dev.xxx.com。如下面的配置：

server {
        listen       80;
        server_name  fe.xxx.com;
        location / {
                proxy_pass dev.xxx.com;
        }
}

这样可以完美绕过浏览器的同源策略：fe.xxx.com访问nginx的fe.xxx.com属于同源访问，而nginx对服务端转发的请求不会触发浏览器的同源策略。

总结：一般中小型公司即使有使用nginx也是后端人员配置，不需要前端人员操作，但是在面试过程中，还有一些大厂是要求前端人员也能够会配置简单的nginx的，因为大项目中接口会分布在不同的服务器，前端开发的时候就需要懂得配置代理服务器解决跨域和转发这些问题，在面试中也是一项不错的加分项，可以先着重关注跨域就可以了，当然了要是有兴趣可以深入去了解。

本文来源于：前端加分技能--Nginx-变化吧门户
特别声明：以上文章内容仅代表作者本人观点，不代表变化吧门户观点或立场。如有关于作品内容、版权或其它问题请于作品发表后的30日内与变化吧联系。