WordPress中JS视频播放器跨域播放失败：No 'Access-Control-Allow-Origin'错误

阿华AIGC实验室

2026-5-19

解决跨域视频加载的CORS问题

嘿，这事儿我熟！你碰到的是浏览器的**CORS（跨源资源共享）**安全限制问题，我之前做视频播放器项目时也踩过一模一样的坑。

先给你理清楚错误原因：你看到的Failed to load ... No 'Access-Control-Allow-Origin' header is present错误，本质是浏览器的同源策略在起作用——它不允许前端脚本直接请求不同域名下的资源，除非目标服务器明确在响应头里添加了允许你的域名（https://www.gozo.kitchen）访问的配置。显然那个视频服务器没做这个配置，所以浏览器直接拦截了请求。

下面给你几个可行的解决办法，按推荐程度排序：

把视频下载到自己服务器（最简单直接）
如果这个视频允许下载且版权没问题的话，直接把视频文件下载到你自己的WordPress服务器上，用同域路径（比如/wp-content/uploads/videos/small.mp4）加载。这样完全避开跨域问题，播放器肯定能正常运行。
配置反向代理（最灵活的方案）
如果你不想动视频文件，可以在你的服务器上配置反向代理，把对外部视频的请求伪装成同域请求。比如用Nginx的话，在配置文件里加这段：
```
location /proxy-video/ {
    proxy_pass http://techslides.com/demos/sample-videos/;
    proxy_set_header Host techslides.com;
    proxy_set_header Referer $http_referer;
}
```
配置完重启Nginx，之后你在播放器里就用https://www.gozo.kitchen/proxy-video/small.mp4来加载视频——浏览器会认为这是同域请求，就不会触发CORS限制了。要是用Apache服务器，就开启mod_proxy和mod_proxy_http模块，写类似的转发规则就行。
用WordPress代理插件（不用碰服务器配置）
如果你对服务器配置不太熟，可以找WordPress的代理类插件，搜索“WordPress CORS proxy”就能找到不少。这类插件会帮你把外部资源的请求转换成同域请求，不用自己写配置，操作起来更简单。
修改目标服务器CORS配置（仅当你有权限时）
要是你能控制那个视频服务器，那就在它的响应头里添加Access-Control-Allow-Origin: https://www.gozo.kitchen（或者用*允许所有源，但安全性较差）。比如Nginx里加：
```
add_header Access-Control-Allow-Origin https://www.gozo.kitchen;
add_header Access-Control-Allow-Methods GET,OPTIONS;
```
不过看情况这个服务器不是你的，这个办法大概率用不上。