如何在客户端跨域使用CORS

How to cross domain with CORS in client side?

本文关键字：CORS 客户端      更新时间：2023-09-26

我设置了一个本地web服务器(127.0.0.1)，我想用javascript从其他域(http://edge.telin.swiftserve.com)获取内容。但是它在控制台web浏览器中返回一个错误。上面写着

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://edge.telin.swiftserve.com/live/livetv-mbr/amlst:fa161aa74311/chunklist_b1328000.m3u8?stime=20160907142814&etime=20160907182814&encoded=0157a3207a0dbe56fac02. (Reason: CORS header 'Access-Control-Allow-Origin' missing)

如果我在chrome浏览器中安装了cors扩展，则成功获取内容，如果我没有安装它，则无法获取。

这是代码

<html>
<head>
</head>
<body>
<script src="https://cdn.jsdelivr.net/hls.js/latest/hls.min.js"></script>
<video id="video" width="640" height="360" controls></video>
<script>
  if(Hls.isSupported()) {
    var video = document.getElementById('video');
    var hls = new Hls();
    hls.loadSource('http://edge.telin.swiftserve.com/live/livetv-mbr/amlst:fa161aa74311/chunklist_b1328000.m3u8?stime=20160907142814&etime=20160907182814&encoded=0157a3207a0dbe56fac02');
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED,function() {
      video.play();
  });
 }
</script>
</body>
</html>

你能够成功地获取内容，因为扩展绕过浏览器安全。这就是原因。

详细说明，浏览器有内置的安全性，以防止它发出跨域请求。这种安全性可以在扩展中禁用。

相关文章：