javascript - CORS 与 XMLHttpRequest 不起作用-6ren

javascript - CORS 与 XMLHttpRequest 不起作用

转载作者：行者123 更新时间：2023-11-28 08:01:48

26

4

我尝试使用 XMLHttpRequest 读取音频流，但收到错误“XMLHttpRequest 无法加载。请求的资源上不存在“Access-Control-Allow-Origin” header 。因此不允许使用 Origin“null”使用权”。我尝试使用此 example 中的 CORS

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title>AUDIO</title>  </head>  <body>    <script type="text/javascript">        function createCORSRequest(method, url) {        var xhr = new XMLHttpRequest();        if ("withCredentials" in xhr) {          // XHR for Chrome/Firefox/Opera/Safari.          xhr.open(method, url, true);        } else if (typeof XDomainRequest != "undefined") {          // XDomainRequest for IE.          xhr = new XDomainRequest();          xhr.open(method, url);        } else {          // CORS not supported.          xhr = null;        }        return xhr;      }
  // Helper method to parse the title tag from the response.
  function getTitle(text) {
    return text.match('<title>(.*)?</title>')[1];
  }

  // Make the actual CORS request.
  function makeCorsRequest() {
    // All HTML5 Rocks properties support CORS.
    var url = 'http://streaming.radionomy.com/VWClassicRock';

    var xhr = createCORSRequest('GET', url);
    if (!xhr) {
      alert('CORS not supported');
      return;
    }

    // Response handlers.
    xhr.onload = function() {
      var text = xhr.responseText;
      var title = getTitle(text);
      alert('Response from CORS request to ' + url + ': ' + title);
    };

    xhr.onerror = function() {
      alert('Woops, there was an error making the request.');
    };

    xhr.send();
  }

  makeCorsRequest();
</script>
 </body> </html>

。如果我像这样将 url 放入音频 html 标签中

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title>AUDIO</title>  </head>  <body>    <audio src='http://streaming.radionomy.com/VWClassicRock' controls></audio>  </body></html>

，然后就可以了。我应该怎么做才能将它与 XMLHttpRequest 一起使用？

最佳答案

我也遇到了同样的问题。cors 错误代表客户端问题，具体取决于浏览器。当您的本地服务器向外部服务器发出请求时会发生这种情况。因此，根据您的本地服务器配置，会显示错误。

根据我个人的经验，使用 fetch 遇到了这个问题。我在我的 php 框架上使用 vue.js。所以基本上我发现我必须设置标题，例如"X-Requested-With": "XMLHttpRequest", "Access-Control-Allow-Origin": "*" 如果您使用 fetch 方法，请使用 mode: 'no-cors' 在前端代码请求上。然后错误就消失了我可以从前端调用第三方api。

所以你可以这样做xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); xhr.setRequestHeader('Access-Control-Allow-Origin', '*');

作为引用，您可以查看以下要点:

https://gist.github.com/khorramk/2c0828ca296832b0319d0155a36af7af和这些链接: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

关于javascript - CORS 与 XMLHttpRequest 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25296455/

26

4

0

文章推荐： css - 应用 CSS 格式以仅在 TD 级别覆盖它

文章推荐： c++ - 如何为 HTTP 代理服务器设置超时(不是连接超时)

文章推荐： html - 如何使用 CSS 在表格的每个单元格中获取一个值？

cors - 如何检查域是否启用了 CORS
我尝试访问此 API click here for more info POST https://api.line.me/v2/oauth/accessToken 但总是得到错误: XMLHttpRe
cors - CORS 如何保护应用程序？
我在掌握 CORS 概念时遇到问题... 我认为同源策略保护应用程序不会对“不受信任的域”进行 ajax 调用。所以， mydomain.com 向发出 ajax 调用somedomain.com
cors - CORS 预检响应如何实际缓存在浏览器中？
一个技术性很强的问题，可能只有了解浏览器内部结构的人才能回答...... 浏览器缓存 CORS 预检响应的准确程度如何(假设在对 OPTIONS 预检请求的响应中返回了 Access-Control-
cors - CORS 试图解决的问题是什么？
我一直在阅读 CORS以及它是如何工作的，但我发现很多事情令人困惑。例如，有很多关于事情的细节，比如 User Joe is using browser BrowserX to get data fr
cors - OWASP CORS 建议中的矛盾
在 OWASP site 上看到这个矛盾，我感到很困惑。 CORS 备忘单: 使用 Access-Control-Allow-Credentials: true 响应 header 时要特别小心。将允
cors - 修复 cors 飞行前未连接
我们无法在飞行前恢复使用 cors:任何帮助都非常感谢 ==========错误========================== About to connect() to localhost p
cors - 为什么字体文件必须遵守 CORS 规则而图像不需要？
跨域请求字体文件时，您必须确保允许请求域使用 CORS header 访问字体文件: 访问控制允许来源访问控制允许凭据然而，这在请求图像时不是必需的，无论是对于 img元素或 background
cors - 对无效 CORS 请求的预期响应是什么？
CORS 规范没有说明服务器应如何响应无效的 CORS 请求。例如，如果请求 Origin 无效，则 CORS spec states :“终止这组步骤。请求超出了本规范的范围。”其他错误情况也有类似
cors - 同源策略和 CORS - 有什么意义？
我在理解同源策略和“解决”它的不同方法时遇到了一些麻烦。很明显，同源策略是作为一种安全措施而存在的，因此来自服务器/域的一个脚本无法访问来自另一个服务器/域的数据。也很明显，有时能够打破此规则很有
cors - API网关云信息 CORS
我正在尝试使用 cloudformation 在 API Gateway 中部署 API。这些方法需要启用 CORS，我遵循此处的模板 Enable CORS for API Gateway in C
cors - 如何将 CORS 预检缓存应用于整个域
我正在构建一个使用 CORS 的 REST 应用程序。每个 REST 调用都是不同的，我发现获取预检 OPTIONS 调用会产生很大的开销。有没有办法缓存并应用预检选项结果，以便对同一域的任何后续调用
cors - MVC6 Cors - 拦截预检
我正在将我的 WebApi 升级到 MVC6。在 WebApi 中，我可以拦截每个 HTTP 请求，如果是预检，我可以用浏览器可以接受的 header 进行响应。我正在尝试找出如何在 MVC6 W
cors - 如何处理无效的 CORS 预检请求？
假设一个 CORS 预检请求进来了，但它为一个或多个 Access-Control-Request-* 指定了一个不受支持的值。标题。服务器应该如何将其传达回浏览器？一些例子: 浏览器发送带有 Ac
cors - 在 GraphDB 上启用 CORS
问题中的一切。附加信息: 使用 Win 10，GraphDB 免费，9.1.1 • RDF4J 3.0.1 • Connectors 12.0.2 我在控制台 => 设置中添加了 graphdb.w
cors - 如何为 SonarQube 服务启用 CORS
我正在尝试通过 jQuery 调用 Sonar 网络服务之一。由于调用是跨域进行的，因此调用在 Chrome 上失败并出现以下错误: 请求的资源上不存在“Access-Control-Allow-Or
cors - 在 NestJs 中启用 Cors
我想使用 NestJs api，但我在每个 fetch 中都收到相同的错误消息: Access to fetch at 'http://localhost:3000/articles' from or
cors - Svelte API 代理 cors
我不确定这是否属于这里，但我在开发我的 svelte 应用程序时遇到了问题。在开发过程中，它目前在独立服务器上运行(遵循使用 rollup 和 sirv 的指南)并针对不同端口上的后端 API。稍
cors - 正确的 CORS 设置是否会阻止 XSRF？
如果在服务器上正确设置 CORS 以仅允许某些来源访问服务器，这是否足以防止 XSRF 攻击？最佳答案更具体地说，很容易错误地认为如果 evil.com 由于 CORS 无法向 good.com
cors - Istio ingress - 启用 cors
我在 Istio 入口上启用 CORS 时遇到问题。正如 Istio Ingress 文档所述，“ingresskubernetes.io”注释将被忽略。是否可以在 Istio 入口上启用 CORS？
cors - Istio ingress - 启用 cors
我在 Istio 入口上启用 CORS 时遇到问题。正如 Istio Ingress 文档所述，“ingresskubernetes.io”注释将被忽略。是否可以在 Istio 入口上启用 CORS？

首页

博学

6Ren·AI

商城

javascript - CORS 与 XMLHttpRequest 不起作用