NextJS前端+.NET后端：自研后端Open Graph视频无法显示求助

1. 跨域资源共享（CORS）配置问题 #

支持Open Graph的播放器发起的视频请求，可能被自研.NET后端的CORS策略拦截——其他网站的视频服务通常配置了宽松的跨域规则，而自研后端可能遗漏了针对性配置：

• 检查.NET后端的CORS中间件，确保允许前端域名（或播放器所在域名）发起GET请求，同时放行Range、Accept等视频请求必需的请求头。
• 示例.NET CORS配置：

  builder.Services.AddCors(options =>
  {
      options.AddPolicy("VideoPolicy", policy =>
      {
          policy.WithOrigins("https://your-nextjs-domain.com")
                .AllowAnyHeader()
                .AllowAnyMethod()
                .AllowCredentials();
      });
  });
  app.UseCors("VideoPolicy");
  

2. 视频媒体类型与编码不兼容 #

OG播放器对视频的编码格式、容器有严格要求，自研后端返回的视频可能不符合标准：

• 检查后端返回的Content-Type响应头，必须是标准视频类型（如video/mp4、video/webm），不能用application/octet-stream这类通用二进制类型。
• 确认视频采用H.264（视频）+ AAC（音频）的通用编码组合，AV1、VP9等小众编码大概率不被OG播放器支持。

3. Open Graph元数据配置错误 #

前端NextJS页面的OG元数据未正确设置，导致播放器无法解析视频地址：

• 确保页面<head>中包含完整的og:video相关标签：

  <meta property="og:video" content="https://your-backend-domain.com/path/to/video.mp4" />
  <meta property="og:video:type" content="video/mp4" />
  <meta property="og:video:width" content="1280" />
  <meta property="og:video:height" content="720" />
  

• og:video的URL必须是可直接访问的绝对路径，不能用相对路径或需要额外鉴权的地址（若需鉴权，需确保播放器能携带认证信息）。

4. 后端未支持HTTP范围请求 #

多数OG播放器依赖HTTP范围请求（Range Header）实现分段加载和进度拖拽，自研后端可能未实现该功能：

• 检查后端视频接口是否能解析Range请求头，返回206 Partial Content响应，同时携带Content-Range、Accept-Ranges: bytes等响应头。
• .NET中可通过PhysicalFile结合enableRangeProcessing属性快速实现：

  [HttpGet("video/{id}")]
  public IActionResult GetVideo(string id)
  {
      var videoPath = Path.Combine("Videos", $"{id}.mp4");
      return PhysicalFile(videoPath, "video/mp4", enableRangeProcessing: true);
  }
  

5. NextJS路由或代理配置问题 #

如果前端通过NextJS代理转发视频请求到后端，可能存在路由匹配错误或代理规则问题：

• 检查next.config.js中的重写/代理配置，确保视频请求路径被正确转发：

  module.exports = {
      async rewrites() {
          return [
              {
                  source: '/api/video/:path*',
                  destination: 'https://your-backend-domain.com/video/:path*',
              },
          ];
      },
  };
  

• 确认代理后的请求不会被NextJS静态资源规则拦截，避免返回404或错误资源。

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