Nginx跨域配置详解

一、概念

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

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

应用场景

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

二、正向代理和反向代理

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

  • 正向代理: 代理客户端
    Nginx跨域配置详解_第1张图片
    正向代理代理的是客户端,服务器不知道实际发起请求的客户端
  • **反向代理:**代理服务端
    Nginx跨域配置详解_第2张图片
    反向代理的是服务器,客户端不知道实际提供服务的服务端

三、安装Nginx

官网下载,到此目录下,start ningx 就可以启动了
Nginx跨域配置详解_第3张图片
启动后如下:
Nginx跨域配置详解_第4张图片

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

四、跨域配置

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

    
  • 后端代码
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跨域配置详解_第5张图片

五、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里的正则

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

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

你可能感兴趣的:(nginx,前端)