最近一个内网项目要求web端数据请求时传输本地IP地址给服务端,这边结合cookie存储来控制获取ip的次数。

//auth.js

import Cookies from 'js-cookie'

const ip = 'My-Ip'

export function getIp() {
  return Cookies.get(ip)
}

export function removeIp() {
  return Cookies.remove(ip)
}

export function getUserIP(callback) {
  if(!window) return;//dom未加载时会报window is undefined
  var ip_dups = {};
  var RTCPeerConnection = window.RTCPeerConnection
    || window.mozRTCPeerConnection
    || window.webkitRTCPeerConnection;
  var useWebKit = !!window.webkitRTCPeerConnection;
  var mediaConstraints = {
    optional: [{ RtpDataChannels: true }]
  };
  var servers = {
    iceServers: [
      { urls: "stun:stun.services.mozilla.com" },
      { urls: "stun:stun.l.google.com:19302" },
    ]
  };
  var pc = new RTCPeerConnection(servers, mediaConstraints);
  function handleCandidate(candidate) {
    var ip_regex = /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/
    var hasIp = ip_regex.exec(candidate)
    if (hasIp) {
      var ip_addr = ip_regex.exec(candidate)[1];
      if (ip_dups[ip_addr] === undefined){
        //存储
        Cookies.set(ip, ip_addr)
        callback(ip_addr);
      }

      ip_dups[ip_addr] = true;
    }
  }
  pc.onicecandidate = function (ice) {
    if (ice.candidate) {
      handleCandidate(ice.candidate.candidate);
    }
  };
  pc.createDataChannel("");
  pc.createOffer(function (result) {
    pc.setLocalDescription(result, function () { }, function () { });
  }, function () { });
  setTimeout(function () {
    var lines = pc.localDescription.sdp.split('\n');
    lines.forEach(function (line) {
      if (line.indexOf('a=candidate:') === 0)
        handleCandidate(line);
    });
  }, 1000);
}
// request.js
import { getUserIP, getIp } from '@/utils/auth'
// request拦截器
service.interceptors.request.use(
  config => {
    
    if (getIp()) {
      // console.log("getIp()", getIp())
      config.headers['Client-Ip'] = getIp()
    } else {
      getUserIP((ip) => {
        // console.log("ip === ", ip)
        config.headers['Client-Ip'] = ip
      })
    }
    return config
  },
  error => {
    Promise.reject(error)
  }
);

能连外网的方法各厂商的免费http框架都行:例如https://api.ipify.org/?format=json

参考文章:https://www.jianshu.com/p/fb1bbf65de22