由于MIME类型（“ text / html”）不匹配（X-Content-Type-Options：nosniff），“ node_modules / primeicons / primeicons.css”被阻止。在angular6

时间：2019-11-22 12:31:13

标签： angular

在 index.html 中，我提到了一些应用样式的链接，并且我在角度6中使用了primeng模块。这里没有应用样式，因此会出现类似...的错误

由于MIME类型（“ text / html”）不匹配（X-Content-Type-Options：nosniff），“ http://localhost:4200/fonts/font-awesome-4.7.0/css/font-awesome.min.css”中的资源被阻止。

与明智的做法一样，我在index.html中提到的所有样式表都出现错误。

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Audit</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!--===============================================================================================-->
  <link rel="icon" type="image/png" href="images/icons/favicon.ico" />
  <!--===============================================================================================-->
  <link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css">
  <!--===============================================================================================-->
  <link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
  <!--===============================================================================================-->
  <link rel="stylesheet" type="text/css" href="fonts/Linearicons-Free-v1.0.0/icon-font.min.css">
  <!--===============================================================================================-->
  <link rel="stylesheet" type="text/css" href="vendor/animate/animate.css">
  <!--===============================================================================================-->
  <link rel="stylesheet" type="text/css" href="vendor/css-hamburgers/hamburgers.min.css">
  <!--===============================================================================================-->
  <link rel="stylesheet" type="text/css" href="vendor/animsition/css/animsition.min.css">
  <!--===============================================================================================-->
  <link rel="stylesheet" type="text/css" href="vendor/select2/select2.min.css">
  <!--===============================================================================================-->
  <link rel="stylesheet" type="text/css" href="vendor/daterangepicker/daterangepicker.css">
  <!--===============================================================================================-->
  <link rel="stylesheet" type="text/css" href="css/util.css">
  <link rel="stylesheet" type="text/css" href="css/main.css">

  <link rel="stylesheet" type="text/css" href="/node_modules/primeicons/primeicons.css" />
  <link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/themes/nova-light/theme.css" />
  <link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/primeng.min.css" />
  <!--===============================================================================================-->
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0" />
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <meta http-equiv="content-type" content="text/html; charset=UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <!-- <link rel="stylesheet" type="text/css" href="/home/pearl/Downloads/DASHBOARD (1)/examples/css/style1.css" -->

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <style>
    .bs-example {
      margin: 20px;
    }
  </style>

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

  <meta name="generator" content="LibreOffice 6.1.3.2 (Linux)" />
  <meta name="author" content="ragaz" />
  <meta name="created" content="2015-08-28T16:56:54" />
  <meta name="changedby" content="ragaz" />
  <meta name="changed" content="2019-05-01T01:07:59" />
  <meta name="AppVersion" content="16.0300" />
  <meta name="Company" content="Smartsheet" />
  <meta name="DocSecurity" content="0" />
  <meta name="HyperlinksChanged" content="false" />
  <meta name="LinksUpToDate" content="false" />
  <meta name="ScaleCrop" content="false" />
  <meta name="ShareDoc" content="false" />

  <style type="text/css">
    body,
    div,
    table,
    thead,
    tbody,
    tfoot,
    tr,
    th,
    td,
    p {
      font-family: "Calibri";
      font-size: small
    }

    a.comment-indicator:hover+comment {
      background: #ffd;
      position: absolute;
      display: block;
      border: 1px solid black;
      padding: 0.5em;
    }

    a.comment-indicator {
      background: red;
      display: inline-block;
      border: 1px solid black;
      width: 0.5em;
      height: 0.5em;
    }

    comment {
      display: none;
    }
  </style>

  <meta charset="utf-8">

  <script src="https://cdn.zingchart.com/zingchart.min.js"></script>





</head>

<body>
  <app-root></app-root>
</body>

</html>

1 个答案:

答案 0 :(得分：-1)

我已经找到了解决办法

大多数情况下，我们可以使用三个地方来放置样式表以执行所需的样式。


1)**index.html** by specifying <link rel="" type="", styelesheet="">
2)Global file **style.css** by importing or adding manually.
3)**component.html** in angular

因此，在这里，我的侧面primeng模块已安装，但样式无法应用。我只是将所需的CSS文件导入了全局文件 style.css 中。这挽救了我的一天。

@import "~primeicons/primeicons.css";
@import "~primeng/resources/themes/nova-light/theme.css";
@import "~primeng/resources/primeng.min.css";
@import "~font-awesome/css/font-awesome.css";
相关问题
最新问题