Nginx常用配置及其他跨域处理（前端）

Nginx主要功能：

     1. 负载均衡
     2. 反向代理
     3. 动静分离
     4. 配置https

负载均衡

负载均衡是一门计算机网络技术，主要用来优化资源使用、最大化吞吐率、最小化响应时间、同时避免过载的目的。
如果一个网站只有一台服务器的话，如果这台服务器宕机了，那么整个网站将无法正常访问。当访问网站人数过多，并发量达到一定规模，超过服务器性能的极限，整个网站也将无法访问。而负载均衡就是用来解决这一类的问题。

负载均衡是通过后端引入一个负载均衡器和至少一个额外的web服务器来缓解这类问题(增加的web服务器和原本的web服务器提供相同的内容)。用户访问的时候，先访问到负载均衡器，再通过负载均衡器将请求转发给后台服务器。

负载均衡器主要可以转发http、https、tcp、udp四种请求规则
负载均衡器如何给用户分配服务器？ 负载均衡器有多种负载均衡算法，基本就是给每台服务器一个不同的权重，通过权重来给用户分配服务器。
负载均衡不需要前端进行配置，主要是服务端进行配置，前端稍作了解即可。

正 / 反向代理

• 正向代理：代理端代理的客户端，服务端认代理端不认客户端。
• 反向代理：代理端代理的服务端，客户端认代理端不认服务端。

处理跨域：

反向代理是前端经常会用到的一项功能，主要是为了解决浏览器跨域访问的问题。当协议、域名、端口号有一项或多项不同时，便违反了同源策略，需要跨域。前端跨域用的技术比较多，如下：

• jsonp跨域：
  使用html的<script>标签可以引入第三方的js文件，所以我们可以通过：

<script src="http://后台接口页面?key=value"></script>

来绕过跨域的限制。但是需要注意的是，jsonp只支持get请求。
jQuery格式：

$.ajax({
       async : true,
       url : "https://api.douban.com/v2/book/search",
       type : "GET",
       dataType : "jsonp",   // 返回的数据类型，设置为JSONP方式
       jsonp : 'callback',   //指定一个查询参数名称来覆盖默认的 jsonp 回调参数名 callback
       jsonpCallback: 'handleResponse',   //设置回调函数名
       data : {}, 
       success: function(xhr){
           console.log(xhr);
       }
 });

• webpack反向代理：
  前端开发中，基于webpack配置环境的spa页面已经是一种趋势，webpack内置的proxy可以帮助我们在开发环境调试接口时将我们的地址代理到后台服务地址，解决跨域问题。配置如下：

proxyTable: {
    '/api': {
      target: 'http://localhost:8080',  //目标接口域名
      changeOrigin: true,  //是否跨域
      pathRewrite: {
        '^/api': '/static/config'   //重写接口
      }
 }

这段代码的含义就是，当前端访问后台接口匹配到 '/api' 时，将代理到 http://localhost:8080 服务端地址，如果前台的接口名为：/api/home，代理的请求路径将是：http://localhost:8080/static/config/home

• 使用Nginx进行反向代理：
  前端开发完成，对代码进行打包后，Webpack就无法使用了。这个时候我们手里只有html、css、js等静态文件，后台接口地址都会访问不到。这个时候Nginx就登场了，Nginx反向代理配置和Webpack大同小异，匹配到动态的地址时将请求转发到一个服务器地址实现跨域。具体流程如下：

1. 访问Nginx官网，下载Nginx到本地
2. 将打包完成的代码放置在nginx的html目录下
3. 打开conf文件夹下的nginx.conf文件，配置如下：

server {
    listen       3000;    //监听的本地端口
    server_name  localhost;    
                
    location /api {         //匹配到/api开头的接口时，转发到下面的服务器地址
        root   html;  
        proxy_pass  http://192.168.xxx.xxx:8080;    //服务器地址      
    }  
                        
    location =/ {
        root html;
        index  index.htm  index.html;   //默认主页
    }
                        
    # 所有静态请求都由nginx处理，存放目录为html  
    location ~ \.(htm|html|js|css|jpg|png|gif|eot|svg|ttf|woff|woff2)$ {  
        root    html;      //配置静态资源地址
    }    
                
    error_page   500 502 503 504  /50x.html;
        location = /50x.html {
        root   html;
    }
}

动静分离

动静分离是为了减少不必要的请求已减少资源的浪费、请求的延时。

举个例子，假如我们所有的前台数据都从后台获取，我们访问百度首页时，如果首页有一张背景图，那么我们每个人每次进入首页时都要去请求接口获取这张背景图，而首页的访问量是巨大的，每次都为了一张背景图去请求同一个接口对于资源的消耗不可计数，为了减少资源的损耗、加快网页的加载速度，动静分离由此而生。

像这种静态资源，前端都会直接保存在本地文件之中，每次进入首页的时候从本地文件内读取静态图片资源，动态数据再通过反向代理去服务器端获取展示。具体配置如下：

 location ~ \.(htm|html|js|css|jpg|png|gif|eot|svg|ttf|woff|woff2)$ {  
     root    html;      //配置静态资源地址
 } 

当匹配到上述后缀名时，直接去html内获取静态资源，不向后台发起请求。

配置https服务

微信小程序现在越来越火，大批前端开发进军微信小程序，但是微信小程序只支持https请求，这是一个问题。但当你看完这篇文章，这将不再是阻挡你的一座大山。

要配置https服务，流程具体如下：

1. 申请证书，便宜ssl可以申请三个月免费ssl证书，申请过程请按照官方提示步骤
2. 申请完成后下载nginx版本的证书至本地，一个crt文件一个key文件，crt为证书，key为密钥
3. 配置nginx，如下：

server {
    listen       443 ssl;    //监听443端口，因为443端口是https的默认端口。80为http的默认端口
    server_name  www.domain.com;    //配置域名
                
    ssl_certificate      证书的绝对路径;
    ssl_certificate_key  密钥的绝对路径;
                
    # location / {        //反向代理的服务器地址，视情况进行配置
    #    proxy_pass   http://112.35.xxx.xxx;
    # }          
}   

案例总结

最后，我们走一遍整个流程