解决URL出现ZERO-WIDTH SPACE的情况

探讨了在请求器中遇到因URL中存在不可见的ZERO-WIDTHSPACE字符导致的地址解析错误。文章分析了这一问题的成因,通常源自从外部来源如Word或Markdown复制的文本,并提供了几种解决方案,包括使用encodeURI进行编码、使用replace函数替换或手动输入URL。

出现的现象:

  • 一般封装的请求器报出类似于因为地址解析错误不能执行请求的错误,而打印出来的请求地址肉眼看来是正确的。这时候就应该考虑是不是出现了“没有宽度的空格”这种情况了。

出现的原因:

  • 一般是从其他地方复制过来的一段文字(如Word,MarkDown),粘贴上之后就可能会有多一个ZERO-WIDTH SPACE的情况,它肉眼看不见。

解决方法:

  • 对 url 进行 encodeURI(url) 编码,如果能够找到 %E2%80%8E 这段编码,就说明 url 是含有 ZERO-WIDTH SPACE 的。所以只要删除它就可以解决问题。
  • 对 url 进行 repalce() 替换掉 %E2%80%8E 或者对你复制进来的编码进行 trim() (因为一般ZERO-WIDTH SPACE出现在复制进来的文字最左边)。
  • 手打url。

这个问题很好解决,但是不好发现。所以,当肉眼看见 url 没有错误,但又确定是 url 的问题,可以转码一下 url 并检查是否出现有ZERO-WIDTH SPACE的情况。

这是我的页面:<template> <view class="flex-col page"> <view class="flex-col flex-auto group_2 space-y-10"> <view class="flex-col section"> <view class="flex-col justify-start items-start self-start relative group"> <image class="image_2" :src="alipath+'/16994517123840546907.png'" /> <image class="image pos_2" :src="alipath+'/16994517125586237777.png'" /> <view class="flex-col section_2 pos_3" style="width: 100%;" :style="{paddingTop:StatusBarRpx+'rpx'}"> <view class="flex-col space-y-25"> <image class="image_3" :src="alipath+'/16994517130786049328.png'" @tap.stop="handleJumpDiy" data-type="navigateTo" :data-url="`/pages/xtsz/system/system`" :class="!isXcx ? 'self-end' : ''" :style="isXcx ? 'margin-left:40rpx' : ''"/> <view class="flex-row items-center" style="width: 100%; display: flex; justify-content: space-between;"> <view class="flex-row items-center space-x-23" style="margin-left: 15px; position:relative" @tap.stop="handleJumpDiy" data-type="navigateTo" :data-url="`/pages/index/friend/user`"> <image class="image_4" mode="widthFix" :src="info.f_head_img" v-if="isLogin"/> <image class="image_4" mode="widthFix" :src="'/static/logo.png'" v-if="!isLogin"/> <!-- 在线状态start --> <view class='flex align-center justify-center line2_0_c0_c1' v-if="info.isOnline == 1 && isLogin "> <view class='flex align-center line2_0_c0_c1_c0'></view> <text class='line2_0_c0_c1_c1'>在线</text> </view> <view class='flex align-center justify-center line2_0_c0_c1' v-if="info.isOnline == -1 && isLogin "> <view class='flex align-center line2_0_c0_c1_c0' style="background:#be6dc9"></view> <text class='line2_0_c0_c1_c1' style="color:#be6dc9">隐身</text> </view> <view class='flex flex-wrap align-center justify-center line2_0_c0_c1' v-if="info.isOnline == 0 && isLogin "> <view class='flex flex-wrap align-center line2_0_c0_c1_c0' style="background: #999999;"></view> <text class='line2_0_c0_c1_c1' style="color: #999999;">离线</text> </view> <!-- 在线状态end --> <view class="flex-col space-y-18"> <view class="flex-row" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 170px; height: 22px; line-height: 22px; display: block;"> <text class="text" v-if="isLogin">{{info.f_nickname}}</text> <text class="text" v-if="!isLogin">请先登录</text> <image class="shrink-0 image_5" :src="alipath+'/16994517134198692639.png'" /> </view> <text v-if="isLogin" class="text_3" style="width: 170px; line-height: 17px; display: block; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;">{{info.autograph || '您还没填写个性签名哦~'}}</text> <text v-if="!isLogin" class="text_3" style="width: 170px; line-height: 17px; display: block; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;">登录后查看更多功能</text> </view> </view> <view class="flex-col justify-start text-wrapper_2" @click="goMy" v-if="isLogin"> <text class="text_2">查看个人名片</text> </view> </view> </view> <view style="width: 100%; display: flex; justify-content: space-evenly; flex-wrap: nowrap; flex-direction: row; margin-top: 60px;"> <view class="flex-col items-center space-y-26"> <text class="font_1 text_4" style="color:#000">{{info.f_look_num || '-'}}</text> <text class="font_2">被查看次数</text> </view> <view class="horiz-divider section_3"></view> <view class="flex-col items-center space-y-26"> <text class="font_1 text_5" style="color:#000">{{info.f_like_num || '-'}}</text> <text class="font_2">被喜欢次数</text> </view> </view> </view> </view> </view> <view class="flex-col section_4"> <view class="flex-row justify-between items-center group_4" style="display: flex; flex-wrap: wrap;" @tap.stop="handleJumpDiy" data-type="navigateTo" :data-url="`/pages/index/friend/album`" v-if="info && isLogin"> <view class="flex-row space-x-20"> <text class="font_3">照片墙</text> </view> <image class="image_9" :src="alipath+'/16994517137526599838.png'"/> <view style="width: 100%; max-height: 112px; margin-top: 15px;"> <view style="display: flex; flex-wrap: nowrap; justify-content: flex-start;" v-if="info && info.f_images.length > 0"> <image class="image_7 equal-division-item" v-for="(item,inde) in info.f_images" :key="inde" :src="item" mode="aspectFill"/> </view> <view v-if="info && info.f_images.length == 0"> <view style="border: 1px solid #6bf4e6; padding: 25px 20px; border-radius: 10px; position: relative; color: #333;"> <image src="https://apps.xiaodan01.com/xcx/friend/jingmei.png" mode="widthFix" style="width: 30px;"></image> <text style="margin-top: -28px; display: block; margin-left: 36px;">上传你的第一张照片吧~</text> <view class="flex-col justify-start text-wrapper_2" style="position: absolute; right: 15px; top: 42px; border-radius: 15px; padding: 0 0;"> <text class="text_2" style="line-height: 28px;">立即上传</text> </view> </view> </view> </view> </view> <view class="flex-row justify-between items-center group_4" @tap.stop="goUrl('/pages/index/friend/likes')"> <view class="flex-row space-x-20"> <image class="shrink-0 image_8" :src="alipath+'/16994517139178409865.png'" /> <text class="font_3">我的喜欢</text> </view> <image class="image_9" :src="alipath+'/16994517137526599838.png'" /> </view> <view class="flex-row justify-between items-center group_4" @tap.stop="goUrl('/pages/index/friend/laheilist')"> <view class="flex-row space-x-20"> <image class="shrink-0 image_10" :src="alipath+'/16994517140932942492.png'" /> <text class="font_3">我的拉黑</text> </view> <image class="image_9" :src="alipath+'/16994517137526599838.png'" /> </view> <view class="flex-row justify-between items-center group_4 border_group_0" @tap.stop="yinshen" v-if="isLogin"> <view class="flex-row space-x-20"> <image class="shrink-0 image_10" :src="alipath+'/clearonline.png'" /> <text class="font_3" v-if="info && info.isOnline == -1">点击上线(当前状态:<text style='color:#be6dc9'>隐身</text>)</text> <text class="font_3" v-else>隐身并清除位置</text> </view> </view> </view> </view> <view class="flex-row justify-between tab-bar page_bottom"> <view class="flex-col items-center group_11" @click="goTab(1)"> <image class="image_7" src="https://apps.xiaodan01.com/xcx/friend/tab1.png" /> <text class="font_7">交友</text> </view> <view class="flex-col items-center group_11" @click="goTab(2)"> <view class="badge" v-if="chatNoNum > 0">{{ chatNoNum > 99 ? '•••' : chatNoNum }}</view> <image class="image_7" src="https://apps.xiaodan01.com/xcx/friend/tab2.png" style="width: 45rpx;height: 42rpx;" /> <text class="font_7">消息</text> </view> <view class="flex-col items-center group_11" @click="goTab(3)"> <image class="image_7" src="https://apps.xiaodan01.com/xcx/friend/tab3_sel.png" style="width: 43rpx;height: 45rpx;" /> <text class="font_7 sel_tab">我的</text> </view> </view> </view> </template> <script> export default { data() { return { isXcx: true, info: { f_images: [], isOnline: 0, f_look_num: 0, f_like_num: 0, autograph: '', f_nickname: '' }, alipath: 'https://huoxiaobang.oss-cn-wulanchabu.aliyuncs.com/appxcx', unreadnum: 0, StatusBarRpx: 0 // 添加缺失的 StatusBarRpx 定义 }; }, computed: { chatNoNum() { return this.$store.state.chatNoNum || 0; }, isLogin() { return !!this.$store.state.token; } }, onLoad() { const sys = uni.getSystemInfoSync(); this.StatusBarRpx = sys.statusBarHeight * 2; // 动态设置状态栏高度(修复原生未定义问题) // #ifdef MP-WEIXIN this.isXcx = true; // #endif }, onShow() { if (global.token) { this.getInfo(); } }, methods: { goUrl(_url) { if (!global.token) { this.toLoginDiy(); return; } uni.navigateTo({ url: _url }); }, toLoginDiy() { uni.navigateTo({ url: '/pagesLogin/login/login/login' }); }, goMy() { uni.navigateTo({ url: '/pages/index/friend/detail?id=' + global.userInfo.id }); }, yinshen() { const _this = this; let txt = ''; let _isOnlineClear = 1; if (this.info.isOnline === -1) { txt = '是否立即上线,即可在交友大厅展示给其他人~'; _isOnlineClear = 0; } else if (this.info.isOnline === 1) { txt = '隐身并清除位置之后,其他人无法在交友大厅看见你哦~'; _isOnlineClear = 1; } // 如果没有要提示的内容,则不弹窗 if (!txt) return; this.$util.showModal({ title: '提示', content: txt, confirmColor: '#be6dc9', success: (res) => { if (res.confirm) { _this.$api.post(global.apiUrls.post5cb54af125f1c, { isOnlineClear: _isOnlineClear, isOnline: 6 }).then((res) => { console.log('更新用户为隐身状态'); if (res.data.code === 1) { _this.getInfo(); // 刷新数据 } }); } } }); }, getInfo() { if (!global.token) { uni.redirectTo({ url: '/pagesLogin/login/login/login' }); return; } this.$api.post(global.apiUrls.post656578e8e6103, { id: global.userInfo.id, is_my: 1 }) .then((res) => { if (res.data.code == 1) { this.info = res.data.data; // 删除 $forceUpdate() —— Vue 响应式自动更新 DOM } else { this.$message.info(res.data.msg); setTimeout(() => { uni.navigateBack({ delta: 1 }); }, 800); } }) .catch((err) => { console.error("获取用户信息失败", err); }); }, handleJumpDiy(e) { const type = e.currentTarget.dataset.type; const url = e.currentTarget.dataset.url; if (type === 'navigateTo') { uni.navigateTo({ url }); } }, goTab(_tab) { let _url = ''; switch (_tab) { case 1: _url = '/pages/index/friend/friend'; break; case 2: _url = '/pages/index/friend/xiaoxi'; break; case 3: _url = '/pages/index/friend/wode'; break; } // 使用 switchTab 替代 redirectTo 更适合底部 tab 切换(避免页面栈堆积) uni.redirectTo({ url: _url, fail: (err) => { console.warn('switchTab 失败,回退使用 navigateTo', err); uni.navigateTo({ url: _url }); } }); } } }; </script> <style scoped lang="css"> @import './common.css'; .page { background-color: #fff; width: 100%; height: 100vh; } /* 在线状态样式 */ .line2_0_c0_c1_c1 { color: #00C70F; font-size: 22rpx; font-weight: 400; transform: scale(0.6); white-space: nowrap; } .line2_0_c0_c1_c0 { background: #00C70F; width: 10rpx; height: 10rpx; border-radius: 10rpx; margin: 0rpx; } .line2_0_c0_c1 { background: rgba(0, 0, 0, 0.6); position: absolute; left: 8rpx; bottom: -1px; border-radius: 15rpx; padding: 0px 3px; } /* 其他通用间距 */ .space-y-10>view:not(:first-child), .space-y-10>text:not(:first-child), .space-y-10>image:not(:first-child) { margin-top: 10rpx; } .space-y-25>view:not(:first-child), .space-y-25>text:not(:first-child), .space-y-25>image:not(:first-child) { margin-top: 25rpx; } .space-x-23>view:not(:first-child), .space-x-23>text:not(:first-child), .space-x-23>image:not(:first-child) { margin-left: 23rpx; } .space-y-18>view:not(:first-child), .space-y-18>text:not(:first-child), .space-y-18>image:not(:first-child) { margin-top: 18rpx; } .space-y-26>view:not(:first-child), .space-y-26>text:not(:first-child), .space-y-26>image:not(:first-child) { margin-top: 26rpx; } .space-x-20>view:not(:first-child), .space-x-20>text:not(:first-child), .space-x-20>image:not(:first-child) { margin-left: 20rpx; } /* 图片与布局 */ .image_2 { width: 750rpx; height: 499rpx; } .image.pos_2 { position: absolute; left: -100px; top: 0; width: 1035rpx; height: 501rpx; } .section_2 { background-image:url(https://huoxiaobang.oss-cn-wulanchabu.aliyuncs.com/appxcx/16994517129071023893.png); background-size: 100% 100%; background-repeat: no-repeat; } .pos_3 { position: absolute; right: 0; top: 0; } .image_3 { width: 32rpx; height: 31rpx; margin-right: 20px; margin-top: 20px; } .image_4 { width: 135rpx; height: 135rpx; border-radius: 135rpx; } .image_5 { margin: 3rpx 0 0 19rpx; width: 17rpx; height: 32rpx; } .text { color: #262626; font-size: 40rpx; font-weight: 700; line-height: 38rpx; } .text_3 { color: #999999; font-size: 22rpx; line-height: 21rpx; } .text-wrapper_2 { padding: 14rpx 0; background-color: #6bf4e6; border-radius: 28rpx 0 0 28rpx; height: 56rpx; margin-top: -15px; } .text_2 { margin-left: 24rpx; margin-right: 15rpx; color: #ffffff; font-size: 28rpx; font-weight: 500; line-height: 28rpx; } .font_1 { font-size: 40rpx; font-weight: 500; color: #333333; } .text_4, .text_5 { line-height: 30rpx; color: #000; } .font_2 { font-size: 28rpx; color: #666666; font-weight: 500; } .section_3 { width: 2rpx; height: 59rpx; background: #d4d4d4; } .horiz-divider { margin: 4rpx 0 19rpx; } .equal-division-item { border-radius: 6rpx; width: 210rpx; height: 210rpx; margin-left: 7px; } .section_4 { padding: 0 30rpx 100rpx; } .group_4 { padding: 36rpx 0 33rpx; border-bottom: solid 2rpx #eeeeee; } .border_group_0 { border: 0; } .image_8 { width: 32rpx; height: 29rpx; } .image_9 { width: 14rpx; height: 26rpx; } .image_10 { width: 32rpx; height: 32rpx; } .badge { position: absolute; top: -5px; right: 8px; width: 20px; height: 20px; z-index: 9; border: 1px solid #FFFFFF; color: #ffffff; background: #FF6464; border-radius: 50%; font-size: 16rpx; text-align: center; line-height: 20px; } </style>
最新发布
11-11
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值