This file should be served over HTTPS. This download has been blocked. computed高级处理_was loaded over an insecure connection. this file

问题：做导出数据功能，返回的链接为不安全的http链接被浏览器拒了

（不聪明的）解决方法：手动将协议头用正则替换成https

相关代码：

  computed: {
    options () {
      return {
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(242,203,97,0.8)',
          padding: [10, 15],
          textStyle: {
            color: '#333',
            fontSize: '12px'
          },
          borderRadius: 4,
          formatter: function (params) {
            const content1 = `<div style="font-size:14px;line-height:22px;font-weight: bold">${params[0].axisValueLabel}</div>`
            const content2 = `<div style="line-height:22px;">${params[0].value}${params[0].seriesName}</div>`
            return content1 + content2
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false, // 距离坐标原点是否有间隙
          data: this.chartDate
          // axisLabel: { //  如果这个字段不设置，echarts会根据屏宽及横坐标数据自动给出间隔
          //   interval: 4, // 间隔长度，可自定义（如果是时间格式，echarts会自动处理）
          //   rotate: 40 // 横坐标上label的倾斜度
          // }
        },
        yAxis: {
          type: 'value'
        },
        grid: {
          left: 75,
          right: 10,
          bottom: 120
        },
        dataZoom: [{
          type: 'slider',
          xAxisIndex: 0,
          minValueSpan: 5,
          start: 0,
          end: 100,
          bottom: 10,
          height: 60,
          backgroundColor: '#f4f4f4',
          zoomLock: this.chartsData.length <= 2, // 是否锁定选择区域（或叫做数据窗口）的大小
          dataBackground: {
            lineStyle: { // 阴影的线条样式
              width: 2,
              color: 'rgba(41,203,151,1)'
            },
            areaStyle: { // 阴影的填充样式
              color: '#F4F4F4'
            }
          },
          fillerColor: 'rgba(94,169,255,0.2)',
          handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
          handleSize: '40%',
          handleStyle: {
            color: '#fff',
            shadowBlur: 4,
            shadowColor: 'rgba(0, 0, 0, 0.2)',
            shadowOffsetX: 0,
            shadowOffsetY: 0
          }
        }],
        series: [
          {
            name: this.propertyUnit,
            type: 'line',
            smooth: true,
            showSymbol: false, // 是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示
            connectNulls: false, // 是否连接空数据
            symbol: 'circle',
            symbolSize: 10,
            sampling: 'average', // 折线图在数据量远大于像素点时候的降采样策略，开启后可以有效的优化图表的绘制效率，默认关闭，也就是全部绘制不过滤数据点
            itemStyle: {
              color: 'rgba(41,203,151,1)'
            },
            data: this.chartsData
          }
        ]
      }
    },
    params () {
      return {
        attribute: this.attribute,
        deviceId: this.deviceId,
        startDay: this.dateRangeParams[0] ? this.dateRangeParams[0].format('YYYY-MM-DD HH:mm') : '',
        endDay: this.dateRangeParams[1] ? this.dateRangeParams[1].format('YYYY-MM-DD HH:mm') : ''
      }
    }
  },
// 导出数据
    async exportFile () {
      try {
        const { data } = await exportStatusFile({ ...this.params })
        if (data.errorCode) {
          this.$message.error('当前数据为空，导出失败')
          return
        }
        download(data.replace(/^http/, 'https'))
      } catch (e) {
        console.log(e)
      }
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105