如何在客户端使用 CORS 跨域？答案

【问题标题】：How to cross domain with CORS in client side?如何在客户端使用 CORS 跨域？
【发布时间】：2016-09-13 21:28:16
【问题描述】：

我设置了一个本地 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>

【问题讨论】：

您需要了解同源策略。你不能那样做。
@slaks 我读过一些网站说我们是否可以使用 cors 跨域。如果服务器和客户端支持 cors。我认为服务器是支持cors。因为我尝试使用安装了扩展名 cors 的浏览器允许来源。我可以获取内容。那么如何让本地服务器将 cors 发送到其他域？
该扩展名与 CORS 完全相反。您需要了解 CORS 实际上是什么。您需要让您的服务器发送该标头。
@slaks 扩展名是客户端对吗？如果是这样，该扩展如何告诉本地 Web 服务器将自定义标头发送到其他域？
阅读en.wikipedia.org/wiki/Cross-origin_resource_sharing。这是关于浏览器，而不是服务器。

标签： javascript get header cors client

【解决方案1】：

您能够成功获取内容，因为该扩展程序绕过了浏览器安全性。这就是原因。

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

【讨论】：

您可以尝试使用 chrome 浏览器并安装此扩展程序 chrome.google.com/webstore/detail/allow-control-allow-origi/…。视频可以播放。如果我禁用它。视频无法播放。扩展喜欢在客户端操作某些东西。我认为我们可以使用 javacript。
@marcrise：不。扩展程序绕过了所有安全性。您需要了解 CORS 是什么。
@Slaks 如果是这样的话。该扩展如何告诉本地 Web 服务器将自定义标头发送到其他域？
@marcrise 它不会告诉本地 Web 服务器发送自定义标头 - 它确实使浏览器忽略该安全策略
@StefanHegny 是否可以使用 javascript 告诉浏览器忽略安全策略？