根据网站编码格式(utf-8,gbk),axios.get加载网站内容 (iframe)

本文描述了一个使用asyncfetchAndDisplayData方法在处理跨域请求时,通过动态nginx代理、Axios库的ArrayBuffer响应类型以及chardet和iconv库来检测和解码网站编码的过程,最后利用xpath获取特定内容并添加类名。
摘要由CSDN通过智能技术生成
async fetchAndDisplayData(bol) {    
        //这里是我具体场景,加载网站可能会涉及跨域,所以在服务器做了动态nginx动态代理
        const fetchUrl = await ConfigApi.getRealUrlApi(this.form.url)
        if(fetchUrl.code == 200){
          //处理fetchURL 成默认接口ip
          if(fetchUrl.data){
            const ipRegex = /(?:\d{1,3}\.){3}\d{1,3}/;
            const ip = config.URI.match(ipRegex)[0];
            var dataUrl = fetchUrl.data.replace('proxy_url_ip', ip)
          }
          // 发送数据请求,这里使用Axios库 关键: 这里把响应类型设置为{ responseType: 'arraybuffer',} 这可以让axios响应对象当作 ArrayBuffer 返回.
          axios.get(dataUrl,{ responseType: 'arraybuffer',})
              .then(response => {
                //这里引入了第三方库 chardet 获取三方库猜测的网站编码格式
                const buffer = Buffer.from(response.data, 'binary');
                this.charset = chardet.detect(buffer);
                let charsetType = this.charset == 'UTF-8' ? 'utf-8' : 'gbk'
                
                //这里引入第三方库 iconv  charsetType根据网站编码格式传递iconv解码
                this.pageContent =  iconv.decode(Buffer.from(response.data), charsetType);
                //下方为场景代码
                this.$nextTick( () =>{
                  if(bol){
                    const hhh = this.getHrefByXPath(this.form.contentSign);
                    if(this.form.contentSign){
                      hhh.classList.add('spClass')
                    }
                  }
                })
              })
              .catch(error => {
                console.error('Error fetching data:', error);
              });
        }
      },

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值