aardio WebView 同源策略与跨域终极解决方案

结论：aardio 的 web.view（基于微软 WebView2/Chromium 内核）默认开启同源策略，。

一、核心用法（一行代码关闭同源）

aardio

复制代码

import win.ui;
import web.view;

/*DSG{{*/
var winform = win.form(text="Vue3 M3U8 播放器";right=1200;bottom=700;border="thin")
winform.add()
/*}}*/

// 关键：第三个参数传入 --disable-web-security 即可完全关闭同源策略
var wb = web.view(winform,,"--disable-web-security");

// 加载你 Vue 打包后的 dist 文件夹
wb.go("/dist/index.html");

winform.show();
return winform.wait();

✅ 效果：

前端代码不需要任何修改 ，直接写原视频地址 http://127.0.0.1:8899/live/stream.m3u8
所有 m3u8 索引文件、.ts 分片、AJAX 请求都不会再报跨域错误
开发环境和打包成 EXE 后完全一致，没有任何差异
不需要修改 8899 端口视频服务的任何配置

二、为什么这是你的最优解

对比你之前了解的所有方案：

表格

方案	开发环境	生产环境	前端修改	视频服务修改	复杂度
Vue CLI 代理	✅ 可用	❌ 失效	需要改地址	不需要	低
Nginx 反向代理	✅ 可用	✅ 可用	不需要	不需要	中
视频服务加 CORS	✅ 可用	✅ 可用	不需要	需要	中
aardio 关闭同源	✅ 可用	✅ 可用	零修改	不需要	极低

特别适合你的场景：

视频服务是第三方程序启动的，你无法修改其配置
最终要打包成桌面应用，不是部署到公网
不想每次打包都改前端地址或配置代理

三、完整工程化示例（推荐）

1. 项目目录结构

已生成代码

2. 完整 main.aardio 代码

aardio

复制代码

import win.ui;
import web.view;
import wsock.tcp.simpleHttpServer;

/*DSG{{*/
var winform = win.form(text="本地视频播放器";right=1200;bottom=700;border="thin")
winform.add()
/*}}*/

// 启动本地 HTTP 服务器托管 Vue 静态文件（比 file:// 协议更稳定，无额外限制）
var httpServer = wsock.tcp.simpleHttpServer("/dist");

// 创建 WebView2 并关闭同源策略
var wb = web.view(winform,,"--disable-web-security");

// 加载本地服务器上的 Vue 页面
wb.go(httpServer.startUrl());

// 可选：开启开发者工具（F12）方便调试
wb.enableDevTools(true);

// 窗口关闭时自动停止 HTTP 服务器
winform.onClose = function(){
    httpServer.stop();
}

winform.show();
return winform.wait();

3. 前端 Vue 代码（完全不用改）

javascript

复制代码

// 直接写原视频地址，不需要加任何代理前缀
const videoUrl = "http://127.0.0.1:8899/live/stream.m3u8";

// hls.js 正常初始化即可
if (Hls.isSupported()) {
  const hls = new Hls();
  hls.loadSource(videoUrl);
  hls.attachMedia(videoElement);
}

四、重要注意事项

安全性说明：
- --disable-web-security 会关闭浏览器的同源策略，仅适用于本地桌面应用
- 如果你的应用只访问自己的本地服务（127.0.0.1:8899），没有任何安全风险
- 绝对不要在公网网页中使用这个参数
不需要额外参数：
- 很多网上教程会让你加 --user-data-dir，aardio 会自动为每个 webview 实例创建独立的用户数据目录，不需要手动添加
- 也不需要加 --allow-file-access-from-files 等其他参数
内核区分：
- web.view：基于 WebView2（Edge/Chromium 内核），推荐使用，性能好，支持所有现代前端特性
- web.form：基于旧版 IE 内核，不推荐，也不支持 --disable-web-security 参数
打包发布：
- 直接在 aardio 中点击「发布」→「编译为独立 EXE」
- 打包后的 EXE 可以在任何 Windows 10 及以上系统运行，不需要安装任何依赖
- 体积很小，一般只有几 MB

五、如果不想完全关闭同源（可选）

如果你出于安全考虑不想完全关闭同源策略，也可以用 aardio 的原生桥接代理功能：

aardio

复制代码

// aardio 端
wb.external = {
    fetchVideo = function(url){
        import inet.http;
        return inet.http().get(url);
    }
}

// 前端 JS 端
async function loadM3u8(url) {
    const m3u8Content = await aardio.fetchVideo(url);
    // 处理 m3u8 内容
}