非安全站点Wix-code数据获取：如何用fetch等方法获取HTTP文件数据？

嘿，我完全懂你碰到的这个麻烦——Wix自带的wix-fetch工具确实没法直接请求HTTP（非HTTPS）的资源，核心原因有俩：一是现代浏览器的混合内容安全策略会拦截从HTTPS页面发起的HTTP请求，二是Wix平台本身也做了安全限制来避免风险。不过别慌，咱有几个可行的方案，给你拆解清楚：

方案一：用Wix后端做代理（最推荐） #

Wix的Velo后端代码运行在服务器端，不受浏览器的混合内容限制，所以可以用它来中转请求，把HTTP资源的数据拿到后再传给前端。具体步骤如下：

1. 创建后端代理文件
   在Wix代码面板里新建一个后端文件（比如命名为http-proxy.jsw），然后写入以下代码：

import { fetch } from 'wix-fetch';

// 暴露一个给前端调用的函数，用来请求HTTP资源
export async function getHttpResource(targetUrl) {
  try {
    // 后端发起HTTP请求
    const response = await fetch(targetUrl, { method: 'GET' });
    if (!response.ok) {
      throw new Error(`请求失败，状态码：${response.status}`);
    }
    // 根据你的数据格式选择text()或json()，比如JSON数据就用response.json()
    const resourceData = await response.text();
    return resourceData;
  } catch (err) {
    console.error('代理请求出错:', err);
    throw err; // 把错误抛给前端处理
  }
}

2. 前端调用后端函数
   在你的前端代码文件里，导入并调用这个后端函数来获取数据：

import { getHttpResource } from 'backend/http-proxy';

async function loadExternalData() {
  try {
    // 替换成你的HTTP数据文件地址
    const data = await getHttpResource('http://example.com/your-data-file.txt');
    // 这里处理拿到的数据，比如渲染到页面上
    console.log('获取到的数据:', data);
  } catch (err) {
    console.error('加载数据失败:', err);
    // 可以在这里给用户展示错误提示
  }
}

// 页面加载时调用函数
$w.onReady(() => {
  loadExternalData();
});

这个方案不仅能解决HTTP请求的问题，还能顺带处理目标资源的CORS限制，简直一举两得。

方案二：将目标资源切换为HTTPS（最省心） #

如果那个数据文件的提供者支持HTTPS，直接把请求地址改成https://开头的链接是最安全也最省事的做法。毕竟现在HTTPS已经是Web的标准配置，混合内容不仅会被拦截，还存在数据泄露的风险，能切换的话优先选这个。

注意事项 #

• 确保你要请求的HTTP资源是可信的，避免通过后端代理引入恶意代码或不安全的数据
• 记得处理各种错误情况，比如请求超时、资源不存在等，提升用户体验
• 如果目标资源需要额外的请求头、参数或者POST方法，只需要在后端的fetch调用里对应调整配置就行

内容的提问来源于stack exchange，提问作者Peter Friedlander