Nginx跨域配置详解

一、概念

Ningx,是轻量级、开源的web服务器，具有高性能的HTTP和反向代理服务器，同时也是一个IMAP/POP3/SMTP代理服务器。
优势：

• 以事件驱动的方式编写，使其具有高并发高性能
• 可扩展性好
• 热部署

应用场景

• 静态资源服务，通过本地文件系统提供服务
• 反向代理服务、负载均衡
• API服务、权限控制，减少应用服务器压力

二、正向代理和反向代理

两种代理做的事情都是代为收发请求和相应

• 正向代理: 代理客户端
  
  正向代理代理的是客户端，服务器不知道实际发起请求的客户端
• **反向代理:**代理服务端
  
  反向代理的是服务器，客户端不知道实际提供服务的服务端

三、安装Nginx

官网下载，到此目录下，start ningx 就可以启动了

启动后如下：

conf都是配置的，点进去有一个nginx.conf就可以配置相关内容了

四、跨域配置

• 前端代码，访问的时候要用服务器的地址，我这里用的是http-server

<button id="getOK">发送请求OK(客户端解决跨域问题)</button>
    <script>
        $(document).ready(function () {
            $('#getOK').click(function () {
                $.ajax({
                    url:'http://localhost:3003/ok',
                    success:function(res) {
                        console.log("success",res)
                    },
                    error:function(err) {
                        console.log('fail',err)
                    }
                })
            })
        }) 
    </script>

• 后端代码

const express = require('express')
const cookieParser = require('cookie-parser')

var app = express()


var router = express.Router()
router.get('/ok',function (req,res) {
    res.json({
        code:200,
        msg:"isOK"
    })    
})


app.use(router)
app.use(cookieParser)
app.listen(3000,function () {
    console.log('listen in 3000')
})

• nginx配置

server {
         listen 3003;
         server_name localhost;
          ## 前端地址
         location = / {
              proxy_pass  http://127.0.0.1:8080;
         }
         ## /no 表示以/no开头的url
         ## 后端地址
        location /no {
              proxy_pass http://localhost:3000; 
 }

这样他们就在同一个域下了，访问如下

五、nginx配置gzip压缩

server {
    # 开启gzip 压缩
    gzip on;
    # 设置gzip所需的http协议最低版本 （HTTP/1.1, HTTP/1.0）
    gzip_http_version 1.1;
    # 设置压缩级别，压缩级别越高压缩时间越长  （1-9）
    gzip_comp_level 4;
    # 设置压缩的最小字节数， 页面Content-Length获取
    gzip_min_length 1000;
    # 设置压缩文件的类型  （text/html)
    gzip_types text/plain application/javascript text/css;
    #on的话会在Header里增加"Vary: Accept-Encoding"，给代理服务器用的，有的浏览器支持压缩，有的不支持，所以避免浪费不支持的也压缩，所以根据客户端的HTTP头来判断，是否需要压缩
    #我这里的浏览器肯定支持gzip压缩，所以就不开启此功能了
    gzip_vary off;
    #IE6对Gzip不怎么友好，不给它Gzip压缩了
    gzip_disable "MSIE [1-6]\.";
 }

六、nginx常用的指令

start nginx           启动nginx
nginx -s stop        快速关闭nginx
nginx -s reload     改变了Nginx相关配置，需要重新加载配置而重载。

七、nginx里的正则

~：    区分大小写
~*：   不区分大小写
^~:     非精确匹配
=:       精确匹配

个人笔记，大概了解这么多，没有深入学习，以后再补充，如果有什么问题，还请多指教