使用pixi.js 4.8.8加载WebM视频时遭遇跨域问题求助

API 探路者

2026-5-14

解决PIXI.js 4.8.8加载WebM视频的跨域问题

我来帮你拆解下这个问题：你遇到的CORS报错本质上是目标视频服务器没有配置允许跨域访问的响应头，这不是你前端代码的问题——哪怕你设置了videoElement.crossOrigin = 'anonymous'，也给PIXI传了跨域参数，只要服务器不返回Access-Control-Allow-Origin头，浏览器就会拦截这个跨源请求。

你说直接在Chrome里打开视频URL能正常播放，那是因为这种情况属于“同源访问”（浏览器地址栏的源就是视频所在的techslides.com），不存在跨域限制；但从localhost去请求这个视频，就属于跨源请求，必须服务器配合才行。

具体的解决办法：

本地代理视频请求：
你可以在本地搭建一个简单的代理服务器，把对techslides.com的视频请求转发到本地地址，这样前端请求本地代理地址就属于同源请求了。比如用Node.js的http-proxy-middleware，或者用nginx做反向代理。举个Node.js的简单示例：
```
const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');
const app = express();

app.use('/video', createProxyMiddleware({
  target: 'http://techslides.com/demos/sample-videos/',
  changeOrigin: true,
  pathRewrite: { '^/video': '' }
}));

app.use(express.static('你的前端项目目录'));
app.listen(3000);
```
之后视频地址就改成/video/small.webm，这样就不会有跨域问题了。
更换支持CORS的视频源：
找一个明确允许跨域访问的WebM视频资源，比如一些公共的CDN资源或者开放的视频API。
本地托管视频文件：
把这个WebM视频下载到你的前端项目目录里，直接引用本地路径（比如./assets/small.webm），这样和你的前端代码同域，自然就没有跨域限制了。