failedToLoad SourceMap：无法加载 https://unpkg.com/peerjs.min.js.map 的内容：HTTP 错误：状态码 404，net::ERR_HTTP_RE

Posted

技术标签:

【中文标题】failedToLoad SourceMap：无法加载 https://unpkg.com/peerjs.min.js.map 的内容：HTTP 错误：状态码 404，net::ERR_HTTP_RESPONSE_CODE_FAILURE【英文标题】：failedToLoad SourceMap:Could not load content for https://unpkg.com/peerjs.min.js.map: HTTP error:status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE 【发布时间】：2021-05-13 06:05:50 【问题描述】：

使用这些代码我可以看到我的视频，但用户的视频没有出现并显示此警告“DevTools 无法加载 SourceMap：无法加载 https://unpkg.com/peerjs.min.js.map 的内容：HTTP 错误：状态代码 404，net::ERR_HTTP_RESPONSE_CODE_FAILURE”

我的代码如下。如果有人找到解决方案，请告诉我。谢谢。

root/server.js：

const express = require('express')
const app = express()
const server = require('http').Server(app)
const io = require('socket.io')(server)
const  v4: uuidV4  = require('uuid')

app.set('view engine', 'ejs')
app.use(express.static('public'))

app.get('/', (req, res) => 
  res.redirect(`/$uuidV4()`)
)

app.get('/:room', (req, res) => 
  res.render('room',  roomId: req.params.room )
)

io.on('connection', socket => 
  socket.on('join-room', (roomId, userId) => 
    socket.join(roomId)
    socket.to(roomId).broadcast.emit('user-connected', userId)

    socket.on('disconnect', () => 
      socket.to(roomId).broadcast.emit('user-disconnected', userId)
    )
  )
)

server.listen(3000)

root/public/script.js：

const socket = io('/')
const videoGrid = document.getElementById('video-grid')
const myPeer = new Peer(undefined, 
  host: '/',
  port: '3001'
)
const myVideo = document.createElement('video')
myVideo.muted = true
const peers = 
navigator.mediaDevices.getUserMedia(
  video: true,
  audio: true
).then(stream => 
  addVideoStream(myVideo, stream)

  myPeer.on('call', call => 
    call.answer(stream)
    const video = document.createElement('video')
    call.on('stream', userVideoStream => 
      addVideoStream(video, userVideoStream)
    )
  )

  socket.on('user-connected', userId => 
    connectToNewUser(userId, stream)
  )
)

socket.on('user-disconnected', userId => 
  if (peers[userId]) peers[userId].close()
)

myPeer.on('open', id => 
  socket.emit('join-room', ROOM_ID, id)
)

function connectToNewUser(userId, stream) 
  const call = myPeer.call(userId, stream)
  const video = document.createElement('video')
  call.on('stream', userVideoStream => 
    addVideoStream(video, userVideoStream)
  )
  call.on('close', () => 
    video.remove()
  )

  peers[userId] = call


function addVideoStream(video, stream) 
  video.srcObject = stream
  video.addEventListener('loadedmetadata', () => 
    video.play()
  )
  videoGrid.append(video)

root/views/room.ejs：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script>
    const ROOM_ID = "<%= roomId %>"
  </script>
  <!-- <script defer src="https://unpkg.com/peerjs@1.2.0/dist/peerjs.min.js"></script> -->
  <script defer src="https://unpkg.com/peerjs@1.3.1/dist/peerjs.min.js"></script>
  <script src="/socket.io/socket.io.js" defer></script>
  <script src="script.js" defer></script>
  <title>Document</title>
  <style>
    #video-grid 
      display: grid;
      grid-template-columns: repeat(auto-fill, 300px);
      grid-auto-rows: 300px;
    
    
    video 
      width: 100%;
      height: 100%;
      object-fit: cover;
    
  </style>
</head>
<body>
  <div id="video-grid"></div>
</body>
</html>

【问题讨论】：

【参考方案1】：

从 Chrome 上的 Inspect 元素转到 Settings/preferences/sources 并取消选中“Enabled javascript source maps”。然后清理控制台并刷新页面。

【讨论】：

以上是关于failedToLoad SourceMap：无法加载 https://unpkg.com/peerjs.min.js.map 的内容：HTTP 错误：状态码 404，net::ERR_HTTP_RE的主要内容，如果未能解决你的问题，请参考以下文章

Nativescript / TypeScript 错误 - 错误 TS5053：无法使用选项“inlineSourceMap”指定选项“sourceMap”

Altair/Vega 地图未显示。 Chrome 无法加载 SourceMap

Chrome 中的断点不适用于 Sourcemap

nginx报错failedtoload"text/html"

Vue CLI4.0 webpack配置属性——css.sourceMap

react打包中不想要sourceMap，但是在命令里加'GENERATE_SOURCEMAP=false'后windows下报错'GENERATE_SOURCEMAP'