使用vue-jsmpeg解决跨域问题

Question

在本地的vue项目中使用rtsp拉流视频资源
使用的是vue-jsMpeg.js
但是出现了跨域问题，想问下如何解决
代码如下

 playDemo(){
    
  
      var rtsp ='rtsp://........'
      var that = this
      var canvas = document.getElementById('canvas-1')
      that.clientjsmpeg = new JSMpeg.Player(rtsp, {
      canvas: canvas,
      autoplay: true
    })

Answer 1

以下回复参考：皆我百晓生、券券喵儿等免费微信小程序作答:

要解决跨域问题，你可以在服务器端设置CORS（跨源资源共享）策略。具体操作取决于你的服务器类型和配置。以下是一些常见的服务器类型及其设置CORS的方法：

1. 对于Node.js的Express服务器，你可以使用cors中间件来允许跨域请求：

const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors());

// 其他路由和中间件设置

1. 对于Apache服务器，你可以在.htaccess文件中添加以下内容：

Header set Access-Control-Allow-Origin "*"

1. 对于Nginx服务器，你可以在配置文件中添加以下内容：

location / {
    add_header 'Access-Control-Allow-Origin' '*';
}

1. 对于IIS服务器，你可以在Web.config文件中添加以下内容：

<configuration>
  <system.webServer>
    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
      </customHeaders>
    </httpProtocol>
  </system.webServer>
</configuration>

注意：将*替换为你的域名或特定的域名列表，以限制允许访问的来源。

在设置了CORS策略后，你的Vue项目中的JSMpeg播放器应该可以正常访问RTSP流了。如果仍然遇到问题，请检查服务器是否正确配置了CORS策略，以及浏览器是否支持跨域请求。