javascript - 语义 UI:无法访问图标 ("CORS request not http")

标签 javascript php html cors semantic-ui

我正在尝试使以下示例发挥作用:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Understanding - Main</title>
    <link rel="stylesheet" type="text/css" href="../semantic/dist/semantic.min.css">
  </head>
  <body>

    <script
      src="https://code.jquery.com/jquery-3.1.1.min.js"
      integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
      crossorigin="anonymous"></script>
    <script src="../semantic/dist/semantic.min.js"></script>
    <script>
      $('#menu-opener').click(function(){ $('.sidebar.menu').sidebar('toggle') })
    </script>

      <div class="ui container">
        <div class="ui sidebar vertical menu">
          <div class="item">Home</div>
          <div class="item">Map</div>
          <div class="item">1. Prehist</div>
          <div class="item">2. Ancient</div>
        </div>
        <i id="menu-opener" class="content icon"></i>
      </div>
  </body>
</html>

但是,图标未加载并且控制台打印

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:////home/abcd/Web/ExplainSemantic/semantic/dist/themes/default/assets/fonts/icons.woff2. (Reason: CORS request not http).

我尝试用谷歌搜索这个错误,但我发现的每个实例都涉及一个人查询在线数据库。鉴于我不懂 PHP,最好不用学习它来修复这个 bug——不过,如果这是必需的,我想这就是我现在陷入的困境。但如果有非 PHP 解决方案,我很乐意学习它。谢谢!

最佳答案

诸如.woff2之类的字体文件必须放置在服务器上!

无法使用file://协议(protocol)访问

关于javascript - 语义 UI:无法访问图标 ("CORS request not http"),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52031758/

相关文章:

javascript - 如何将计算值绑定(bind)到 Angular.js 中的 ng-model 字段,以便我可以使用 Ruby on Rails 将完整的表单详细信息保存在数据库中

php - 使用 $array[] 的多维数组

javascript - AJAX 和 PHP : how to stop script being cached?

jquery - 在没有间隙/行的列中排列 div block

html - 如何用xpath解析html字符串

javascript - 即使 .submit() 返回 false,提交按钮也会刷新页面

javascript - Google Map API - 错误位置的多个图标

php - 仅返回文本的前 500 个字符

javascript - 表格列的高度相等

javascript - 如何将现有回调 API 转换为 Promise?