Oct1a
Home Archives Photography
Home Archives Photography
服务器Nginx设置限制IP或设备访问网站

限制IP访问

server{
    allow 127.0.0.1/16; //allow:允许访问
    deny all; //拒绝访问
}

不懂IP段如何计算，这个工具不错：ip计算器 ip地址计算器

限制设备型号访问

server{
  location /{
    if($http_user_agent ~"(HUAWEIVNS-AL00)|(可添加其他关键字)"){
      proxy_pass http://www.xxxx.com
    }
    return 403
  }
}

限制访问的host头

server{
  location /{
    if($host =='www.xxxx.com'){
      proxy_pass http://www.xxxx.com
    }
    return 404
  }
}

限制爬虫,重定向

server{
  if ($http_user_agent ~* (baiduspider|googlebot|Googlebot|soso|bing|sogou|yahoo|sohu-search|yodao|YoudaoBot|robozilla|msnbot)) {
    rewrite ^/(.*)$ https://www.baidu.com permanent;
  }
}

使用map批量设置

下面代码来源：stackExchange

map "$host:$http_user_agent" $my_domain_map_host {
  default                             0;
  "~*^www.domain.com:Agent.*$"        http://www.domain2.com;
  "~*^www.domain2.com:Other Agent$"   http://www.domain3.com;
}

server {
  if ($my_domain_map_host) {
    return 302 $my_domain_map_host$request_uri;
  }
}

设备UA限制代码批量生成，这网站不错
http://detectmobilebrowsers.com/

axios在elecrton请求超时处理办法

自己开发的一款elecron批量上传商品工具，在使用的过程中，会偶尔出现请求超时问题，无法获取到数据。

import axios from 'axios'
import { Message } from 'element-ui'
const serves = axios.create({
  baseURL: process.env.BASE_API,
  timeout: 3000
})

// 设置请求次数，请求间隔
serves.defaults.retry = 4;
serves.defaults.retryDelay = 800;

axios.interceptors.response.use(undefined, function axiosRetryInterceptor(err) {
  var config = err.config;
  // If config does not exist or the retry option is not set, reject
  if (!config || !config.retry) return Promise.reject(err);

  // Set the variable for keeping track of the retry count
  config.__retryCount = config.__retryCount || 0;

  // Check if we've maxed out the total number of retries
  if (config.__retryCount >= config.retry) {
    // Reject with the error
    Message.error('网络请求超时，请稍后再试')
    return Promise.reject(err);
  }

  // Increase the retry count
  config.__retryCount += 1;

  // Create new promise to handle exponential backoff
  var backoff = new Promise(function(resolve) {
    setTimeout(function() {
      resolve();
    }, config.retryDelay || 1);
  });

  // Return the promise in which recalls axios to retry the request
  return backoff.then(function() {
    return axios(config);
  });
});


// 设置请求发送之前的拦截器
serves.interceptors.request.use(config => {
  config.headers.action = localStorage.getItem('name')
  return config
}, err => Promise.reject(err))

// 将serves抛出去
export default serves
前端网页字体优化的4种方案

日常开发网页经常会使用一些特殊字体，比如思源黑体、苹方字体等，因为这些字体在一般的宿主环境中是不存在的，需要通过 css 的 @font-face 定义，并从服务器中加载对应的字体文件，而字体文件一般都是比较大的，甚至有时候一个字体比其他所有的资源（js、css、图片）加起来还要大，对网页的加载性能起到非常关键的影响，因此有必要对字体进行一些优化。 本文主要从字体格式、按需提取、统一渲染三个方面来谈谈优化字体的常用技巧。

TS入门笔记1-ts介绍与环境安装

安装

npm install ts-loader typescript -D

环境

需要一个热更新环境，不然每次去用命令运行编译ts,然后再预览会很麻烦。

npm install tss-node -g

安装这个包还需要再安装一个第三方包扩展

npm install tslib @types/node -g

已经正式从简书迁移到博客了，之前是比较看重简书在百度的权重，但现在简书已经不太适合发技术文章了，很乱，还是在自己博客写写文章比较舒适。