Ajax-hook拦截全局ajax请求操作

作者：matrix 发布时间：2017-12-13 分类：零零星星

github项目地址：https://github.com/wendux/ajax-hook/blob/master/src/ajaxhook.js

项目页面中有很多ajax接口请求，每次需要手动判断数据code进行错误消息提示，再加上有些使用jQuery，有些使用fetch操作，要是能有一个统一的$.ajaxSetup那就爽翻。搜索下ajax的全局拦截，有大神写好了，打开即食，NICE。代码量不大，大致的原理好像是把内置的XMLHttpRequest对象给代理了，克隆一份，进行伪装。请求操作都是通过的代理层，拦截、修改操作也都是可以的～

使用

加载ajaxhook.js文件，代码中给浏览器window对象注册全局方法：hookAjax，unHookAjax。

hookAjax //挂载拦截钩子
unHookAjax（） //取消ajax请求代理

拦截处理操作

hookAjax方法注册拦截的切入点，执行回调操作。
这里用到onload 即请求完成获取数据的时候。
代码是放在vue项目里面，手动挂载DOM。若出现第一次错误请求没有成功拦截的情况，那就需要把代码放置在头部。

        //全局监听ajax请求，用于提示会话过期，和其他的错误消息。
        if ('function' === typeof(hookAjax)) {
            hookAjax({
                onload: function (xhr) {
                    if (xhr.status >= 500) return layer.alert('服务器报错，请联系管理员！'+"</br>请求地址：</br>"+xhr.responseURL, {icon: 2, title: '无形之刃 <3'});
                    var data = JSON.parse(xhr.responseText);
                    if (!!data) {
                        if (data.code !== 0) {
                            if (!!data.msg) {
                                layer.alert(data.msg, {icon: 2, title: 'ERROR'});
                            }
                        }
                    }
                }
            })
        }

拦截函数 如：onload 返回值是一个boolean，如果为true则会阻断ajax请求，默认为false,不会阻断请求。

参考：
http://www.jianshu.com/p/9b634f1c9615

nginx配置proxy_cache缓存策略

作者：matrix 发布时间：2017-12-09 分类：零零星星

图片3703－nginx定向清理Proxy Cache缓存
之前有使用脚本删除缓存的记录，但是没有留下下proxy的使用，今天正好配置下下。
>> nginx定向清理Proxy Cache缓存

proxy是nginx的自带模块，作为前台代理后端的数据库请求，负载均衡啊什么的贼6

proxy配置

修改 nginx.conf文件配置 lnmp环境一般都是/usr/local/nginx/conf/nginx.conf
在http代码块中添加proxy操作

> vi /usr/local/nginx/conf/nginx.conf #编辑文件

#添加如下内容
proxy_connect_timeout 2400;
proxy_read_timeout 240;
proxy_send_timeout 240;
proxy_buffer_size 16k;
proxy_buffers 4 64k;
proxy_busy_buffers_size 128k;
proxy_request_buffering off;
proxy_cache_lock on;
proxy_cache_valid 200 206 403 1d;#默认全局缓存200，206，403响应状态码 1天
proxy_cache_use_stale updating;
proxy_temp_file_write_size 128k;

#配置缓存目录，以及keys_zone作用域名称
proxy_temp_path /var/tmp/nginx/proxy_temp_dir;
proxy_cache_path /var/tmp/nginx/proxy_cache levels=1:2 keys_zone=link:2m inactive=1d max_size=1g;

#是否忽略后端返回的Cache-Control,Expires响应头。
proxy_ignore_headers Cache-Control;
proxy_ignore_headers Expires;
proxy_ignore_headers Set-Cookie;

#向后端代理传递请求头数据 避免丢失
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header Remote-Host $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $http_x_forwarded_proto; # 用户请求协议 https http

或者也可以在http代码块中使用 include "hhtjim_proxy.conf";方式载入文件（文件名自定义）。

vhost配置proxy_pass

找到需要配置的vhost主机，修改conf文件中server代码块

        proxy_cache link;
        proxy_cache_valid 200 30d;
        proxy_cache_valid 301 302 303 10m;
        proxy_cache_valid any 5m;

        #添加返回响应头，X-Cache标记是否命中缓存。
        add_header X-Cache "$upstream_cache_status";

        #拦截所有请求 到link负载均衡策略
        location / {
        proxy_pass http://link;
        }

配置负载均衡

依旧在http块中添加上游upstream

#自定义link名称
upstream link { 
    ip_hash;#负载均衡ip hash定位.每个请求按访问IP的hash结果分配.解决session问题
    server 127.0.0.1:8182 weight=3; #权重为3
    server 127.0.0.1:8084 weight=1; #权重为1
    keepalive 32;
}

若没有配置多余后端服务,直接使用当前nginx也是可以的。
完整vhost配置记录如下：

#入口拦截
server
    {
        listen 80;
        #listen [::]:80;
        server_name www.hhtjim.com ;
        index index.html index.htm index.php default.html default.htm default.php;
        root  /home/wwwroot/www.hhtjim.com/;

        include other.conf;


        include enable-php.conf;

        proxy_cache link;
        proxy_cache_valid 200 30d;
        proxy_cache_valid any 5m;


    add_header X-Cache "$upstream_cache_status";

        location / {
        proxy_pass http://link;
        }
    }


#模拟网站后台程序,数据库处理
server
    {
        listen 8182;
        #listen [::]:80;
        server_name localhost ;
        index index.html index.htm index.php default.html default.htm default.php;
        root  /home/wwwroot/www.hhtjim.com/;

        include other.conf;

        include enable-php.conf;

        #Slim Framework
        location / {
            try_files $uri $uri/ /index.php$is_args$args;
        }


        location ~ /.well-known {
            allow all;
        }

        location ~ /\.
        {
            deny all;
        }
        access_log off;
    }

重启nginx

lnmp nginx start 

#或者 reload 未尝试
# lnmp nginx reload
# ./nginx -s reload

踩坑

  1. 目录不存在 
    Starting nginx... nginx: [emerg] mkdir() "/var/tmp/nginx/proxy_temp_dir" failed (2: No such file or directory)

    第一次配置完，nginx各种错误，什么缓存目录不存在，proxy_pass放置代码块不正确。
    如果是proxy_temp_dir目录不存在则自行新建就好，最后记得还要修改权限chmod -R 0777 /var/tmp/nginx/

  2. 测试发现X-cache一直MISS
    确保有忽略掉程序返回的缓存控制响应头 例如Cache-Control，Expires。

    注意：后台服务器返回的响应头有cache-Control，Expires,其值nocache，private 都表示不缓存，也就会导致全部MISS。

    最后，修改

    1.修改后端程序返回的响应头，可控性最高。
2.设置proxy_ignore_headers 忽略掉头部
proxy_ignore_headers Cache-Control;
proxy_ignore_headers Expires;

参考：
http://blog.csdn.net/gamay/article/details/73613741
https://www.lvtao.net/server/224.html
http://blog.csdn.net/zstack_org/article/details/53940047
http://blog.csdn.net/wzx19840423/article/details/50474650
http://blog.51yip.com/apachenginx/1018.html