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

最新推荐文章于 2024-03-21 14:15:53 发布

今天想我了嚒

最新推荐文章于 2024-03-21 14:15:53 发布

阅读量158

点赞数 3

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_42414313/article/details/135987413

版权

本文描述了一个使用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);
              });
        }
      },