在做一个获取用户登录ip时遇到了点问题,在后台获取时出现了获取到的ip地址是我服务器的地址(原因未知,没找到),,就想着在前端直接获取到 然后发送给后端,这样就不会出现ip地址是服务器地址的尴尬了
但是在查询资料时,发现好多是用js获取,但是vue引用外部js特别麻烦,甚至没找到解决的方法。
查找好久资料后,才发现有对应的vue解决方案,也就是使用搜狐的api,具体使用如下
搜狐那个接口关闭了,可以使用 :http://myip.ipip.net/
在vue.config.js配置文件中配置跨域
注意: 每次更新配置文件都需要重启项目,否则无效
devServer: {
proxy: {//配置跨域
'/apis': {
target: 'http://pv.sohu.com',//搜狐的域名
ws: true,
changOrigin: true,//允许跨域
pathRewrite: {
'^/apis': ''//请求的时候使用这个api就可以
}
}
}
使用:
发送网络请求
this.$http.post('/apis/cityjson?ie=utf-8',{}).then(res => {
console.log(res.data);
//解析格式即可
})
返回数据:
另附获取设备型号的方法
// get brower
export function GetCurrentBrowser () {
let ua = navigator.userAgent.toLocaleLowerCase()
let browserType = null
if (ua.match(/msie/) != null || ua.match(/trident/) != null) {
browserType = 'IE'
} else if (ua.match(/firefox/) != null) {
browserType = 'firefox'
} else if (ua.match(/ucbrowser/) != null) {
browserType = 'UC'
} else if (ua.match(/opera/) != null || ua.match(/opr/) != null) {
browserType = 'opera'
} else if (ua.match(/bidubrowser/) != null) {
browserType = 'baidu'
} else if (ua.match(/metasr/) != null) {
browserType = 'sougou'
} else if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) {
browserType = 'QQ'
} else if (ua.match(/maxthon/) != null) {
browserType = 'maxthon'
} else if (ua.match(/chrome/) != null) {
var is360 = _mime('type', 'application/vnd.chromium.remoting-viewer')
if (is360) {
browserType = '360'
} else {
browserType = 'chrome'
}
} else if (ua.match(/safari/) != null) {
browserType = 'Safari'
} else {
browserType = 'others'
}
return browserType
}
function _mime (option, value) {
var mimeTypes = navigator.mimeTypes
for (var mt in mimeTypes) {
if (mimeTypes[mt][option] === value) {
return true
}
}
return false
}
// get os
export function GetOs () {
let sUserAgent = navigator.userAgent.toLocaleLowerCase()
let isWin = (navigator.platform === 'win32') || (navigator.platform === 'windows')
let isMac = (navigator.platform === 'mac68k') || (navigator.platform === 'macppc') || (navigator.platform === 'macintosh') || (navigator.platform === 'macintel')
if (isMac) return 'Mac'
var isUnix = (navigator.platform === 'x11') && !isWin && !isMac
if (isUnix) return 'Unix'
var isLinux = (String(navigator.platform).indexOf('linux') > -1)
if (isLinux) return 'Linux'
if (isWin) {
var isWin2K = sUserAgent.indexOf('windows nt 5.0') > -1 || sUserAgent.indexOf('windows 2000') > -1
if (isWin2K) return 'Win2000'
var isWinXP = sUserAgent.indexOf('windows nt 5.1') > -1 || sUserAgent.indexOf('windows xp') > -1
if (isWinXP) return 'WinXP'
var isWin2003 = sUserAgent.indexOf('windows nt 5.2') > -1 || sUserAgent.indexOf('windows 2003') > -1
if (isWin2003) return 'Win2003'
var isWinVista = sUserAgent.indexOf('windows nt 6.0') > -1 || sUserAgent.indexOf('windows vista') > -1
if (isWinVista) return 'WinVista'
var isWin7 = sUserAgent.indexOf('windows nt 6.1') > -1 || sUserAgent.indexOf('windows 7') > -1
if (isWin7) return 'Win7'
}
if (sUserAgent.indexOf('android') > -1) return 'Android'
if (sUserAgent.indexOf('iphone') > -1) return 'iPhone'
if (sUserAgent.indexOf('symbianos') > -1) return 'SymbianOS'
if (sUserAgent.indexOf('windows phone') > -1) return 'Windows Phone'
if (sUserAgent.indexOf('ipad') > -1) return 'iPad'
if (sUserAgent.indexOf('ipod') > -1) return 'iPod'
return 'others'
}
// getAddress
// {/*<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>*/}
// {/*export function GetAddress () {*/}
// {/*return returnCitySN*/}
// {/*}*/}
使用:
//获取用户登录设备
import * as sysTool from "assets/js/systemTool";
//方法中使用
this.brower = sysTool.GetCurrentBrowser();
this.os = sysTool.GetOs();
console.log(
"浏览器,操作系统,:",
this.brower,
this.os
);
参考文章:
https://blog.csdn.net/Lycoriy/article/details/103596419?ops_request_misc=&request_id=&biz_id=102&utm_term=vue%E8%8E%B7%E5%8F%96IP&utm_medium=distribute.pc_search_result.none-task-blog-2blogsobaiduweb~default-0-103596419
https://blog.csdn.net/xuebimi/article/details/96840965?ops_request_misc=&request_id=&biz_id=102&utm_term=vue%E8%8E%B7%E5%8F%96IP&utm_medium=distribute.pc_search_result.none-task-blog-2blogsobaiduweb~default-5-96840965