リンクされたスタイルシートのエラー - リソースは、スタイルシートとして解釈されず、基本的な次のMIMEタイプtext/plainの

で転送チュートリアル（https://www.fullstackreact.com）と反応が、私は与えられたスタイルシートは、コンソールでこのエラーにより正常に動作するために取得することはできませんよ。ここでリンクされたスタイルシートのエラー - リソースは、スタイルシートとして解釈されず、基本的な次のMIMEタイプtext/plainの

は完全な私がこれまで持っているものの源である - 私が持っている私はdevのツールにとtimeline.cssのためにチェックしました

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Timeline</title> 
    <link href="https://gist.githubusercontent.com/auser/2bc34b9abf07f34f602dccd6ca855df1/raw/40c5e7c8cad4c6920fed940fc31cbb63abd94c29/timeline.css" rel="stylesheet" type="text/css" /> 
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" /> 

    <!-- Script tags including React --> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js"></script> 
    <script src="https://unpkg.com/[email protected]/babel.min.js"></script> 

</head> 
<body> 
    <div class="demo"> 
    <div id="app"></div> 
    </div> 
    <script type="text/babel"> 
    class App extends React.Component { 
     render() { 
      return (
      <div className="notificationsFrame"> 
       <div className="panel"> 
        <Header /> 
       </div> 
      </div> 
      ) 
     } 
    } 


    class Header extends React.Component { 
     render() { 
      return (
      <div className="header"> 
       <div className="fa fa-more"></div> 

       <span className="title">Timeline</span> 

       <input 
       type="text" 
       className="searchInput" 
       placeholder="Search ..." /> 

       <div className="fa fa-search searchIcon"></div> 
      </div> 
      ) 
     } 
    } 

     var mount = document.querySelector('#app'); 
     ReactDOM.render(<App />, mount); 
    </script> 
</body> 
</html>

「同意する：テキスト/ cssの」リクエストヘッダ内のどのI信じているなぜそれが別のタイプで転送されているのか分かりません。この質問は前に頼まれましたが、答えはすべて、要求のタイプとは何かが間違っていると言っているように見えるが、私は場所を確認することはできません。

出典

2017-11-13 user3407039

与えるのですか？ – Aymen

それは私のコンソールに警告だ - 「リソースがスタイルシートとして解釈されず、MIMEタイプtext/plainではと転送」私のページの上部にあるリンクtimeline.cssファイルイムを参照します。 – user3407039

私はあなたの問題を解決した場合教えて:) – Aymen

サイトブロックのウェブマスターすべてのスクリプトとスタイルシート。これは、MIMEタイプの混乱攻撃を回避するセキュリティ機能です。詳細を行くための

：mozilla developer

ソリューション：

他のCDNの変化、あなたのスタイルシートtimeline.cssたり、ホストやhtmlページに入力し例：your code

またはこの：

あなたは、エラーの種類を

<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Timeline</title> 
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" /> 

    <!-- Script tags including React --> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js"></script> 
    <script src="https://unpkg.com/[email protected]/babel.min.js"></script> 

</head> 
    <style> 
    .demo { 
    position: relative; 
} 
.demo .notificationsFrame { 
    z-index: 2; 
    width: 100%; 
    top: 20px; 
    background: #fff; 
    border-radius: 3px; 
    overflow: hidden; 
    font-family: 'Open Sans', Helvetica, sans-serif; 
    margin-bottom: 40px; 
} 
.demo .notificationsFrame.show-menu { 
    transform: translate3d(150px, 0, 0); 
} 
.demo .notificationsFrame .searchInput { 
    border: 10px solid red; 
    box-sizing: border-box; 
    position: absolute; 
    top: 13px; 
    right: 55px; 
    width: 200px; 
    height: 34px; 
    border-radius: 17px; 
    border: none; 
    background: #fff; 
    padding: 0 17px; 
    font-size: 13px; 
    color: #666; 
    transition: all 0.3s ease-in-out; 
    transform: translateX(15px); 
    opacity: 0; 
    pointer-events: none; 
} 
.demo .notificationsFrame .searchInput:focus { 
    outline: none; 
} 
.demo .notificationsFrame .searchInput.active { 
    -webkit-transform: translateX(0); 
    transform: translateX(0); 
    opacity: 1; 
    pointer-events: all; 
} 
.demo .notificationsFrame .header { 
    position: relative; 
    height: 60px; 
    background: #5f98cd; 
    padding-top: 0; 
} 
.demo .notificationsFrame .header .menuIcon { 
    position: absolute; 
    width: 29px; 
    height: 15px; 
    top: 23px; 
    left: 20px; 
    cursor: pointer; 
} 
.demo .notificationsFrame .header .menuIcon:hover .dashTop, .demo .notificationsFrame .header .menuIcon:hover .dashBottom, .demo .notificationsFrame .header .menuIcon:hover .circle { 
    background: #fff; 
} 
.demo .notificationsFrame .header .menuIcon .dashTop { 
    position: absolute; 
    width: 20px; 
    height: 3px; 
    top: 0; 
    left: 0; 
    background: #b2daff; 
    border-radius: 3px; 
    -webkit-transition: all 0.2s ease-in-out; 
    transition: all 0.2s ease-in-out; 
} 
.demo .notificationsFrame .header .menuIcon .dashBottom { 
    position: absolute; 
    width: 20px; 
    height: 3px; 
    top: 0; 
    left: 0; 
    background: #b2daff; 
    border-radius: 3px; 
    -webkit-transition: all 0.2s ease-in-out; 
    transition: all 0.2s ease-in-out; 
    width: 29px; 
    top: auto; 
    bottom: 0; 
} 
.demo .notificationsFrame .header .menuIcon .circle { 
    position: absolute; 
    height: 7px; 
    width: 7px; 
    border-radius: 4px; 
    top: -2px; 
    right: 0; 
    background: #b2daff; 
    -webkit-transition: all 0.2s ease-in-out; 
    transition: all 0.2s ease-in-out; 
} 
.demo .notificationsFrame .header .title { 
    display: block; 
    text-align: center; 
    color: #fff; 
    font-weight: 600; 
    font-size: 15px; 
} 
.demo .notificationsFrame .header .searchIcon { 
    position: absolute; 
    z-index: 3; 
    font-size: 21px; 
    color: #fff; 
    top: 18px; 
    right: 20px; 
    -webkit-transition: all 0.3s ease; 
    transition: all 0.3s ease; 
    cursor: pointer; 
} 
.demo .notificationsFrame .header .searchIcon:hover { 
    color: #fff; 
} 
.demo .notificationsFrame .content { 
    position: relative; 
    height: 100%; 
    overflow: hidden; 
} 
.demo .notificationsFrame .content .line { 
    position: absolute; 
    top: 0; 
    left: 40px; 
    bottom: 0; 
    width: 3px; 
    background: #ebebeb; 
} 
.demo .notificationsFrame .content .item { 
    position: relative; 
    z-index: 2; 
    margin: 20px 30px 30px 70px; 
    display: block; 
    /*border-radius: 50%; 
    border: 5px solid #ecf0f1; 
    box-sizing: border-box; 
    position: absolute; 
    height: 20px; 
    width: 20px; 
    background: #fff; 
    border: 2px solid #5F98CD; 
    box-shadow: 0 0 0 3px #fff;*/ 
} 
.demo .notificationsFrame .content .item:hover { 
    color: #5f98cd; 
    cursor: pointer; 
} 
.demo .notificationsFrame .content .item .circle { 
    box-sizing: border-box; 
    position: absolute; 
    height: 11px; 
    width: 11px; 
    background: #fff; 
    border: 2px solid #5f98cd; 
    box-shadow: 0 0 0 3px #fff; 
    border-radius: 6px; 
    top: 0; 
    left: -20px; 
} 
.demo .notificationsFrame .content .item .avatar { 
    position: absolute; 
    height: 40px; 
    width: 40px; 
    display: inline-block; 
    vertical-align: top; 
    overflow: hidden; 
    left: -49px; 
} 
.demo .notificationsFrame .content .item .avatar img { 
    width: 100%; 
    -webkit-border-radius: 50%; 
    -moz-border-radius: 50%; 
    -ms-border-radius: 50%; 
    -o-border-radius: 50%; 
    border-radius: 50%; 
    position: absolute; 
    left: 0; 
    top: 0; 
} 
.demo .notificationsFrame .content .item .time { 
    display: block; 
    font-size: 11px; 
    line-height: 11px; 
    margin-bottom: 2px; 
} 
.demo .notificationsFrame .content .item p { 
    font-size: 15px; 
    line-height: 20px; 
    margin: 0px 40px 0px 0px; 
    font-family: 'Open Sans', Lora, Times, no-serif; 
} 
.demo .notificationsFrame .content .item p b { 
    font-weight: 600; 
} 
.demo .notificationsFrame .content .item .right { 
    position: absolute; 
    right: 5px; 
    font-size: 11px; 
    top: 11px; 
} 
.demo .notificationsFrame .content .item .commentCount { 
    position: absolute; 
    right: 15px; 
    font-size: 12px; 
    top: 11px; 
} 
.demo .notificationsFrame .content .item .commentCount:after { 
    content: "\f075"; 
    font-family: FontAwesome; 
    position: absolute; 
    font-size: 20px; 
    color: #ebebeb; 
    top: -50%; 
    left: 100%; 
    margin-left: 10px; 
    z-index: 3; 
} 
.demo .notificationsFrame .content .item .commentCount:hover:after { 
    color: lightblue; 
} 
.demo .notificationsFrame .footer { 
    position: relative; 
    background: #fff; 
    margin: auto; 
    height: 30px; 
    border-top: 1px solid #eee; 
    width: 100%; 
    border-radius: 10px; 
} 
.demo .notificationsFrame .footer button { 
    background: #eee; 
    position: absolute; 
    width: 100%; 
    right: 0px; 
    left: 0px; 
    top: 0px; 
    bottom: 0px; 
    border: 0; 
} 
.demo .notificationsFrame .footer button i { 
    margin: 0 10px; 
} 

    </style> 
<body> 
    <div class="demo"> 
    <div id="app"></div> 
    </div> 
    <script type="text/babel"> 
    class App extends React.Component { 
     render() { 
      return (
      <div className="notificationsFrame"> 
       <div className="panel"> 
        <Header /> 
       </div> 
      </div> 
      ) 
     } 
    } 


    class Header extends React.Component { 
     render() { 
      return (
      <div className="header"> 
       <div className="fa fa-more"></div> 

       <span className="title">Timeline</span> 

       <input 
       type="text" 
       className="searchInput" 
       placeholder="Search ..." /> 

       <div className="fa fa-search searchIcon"></div> 
      </div> 
      ) 
     } 
    } 

     var mount = document.querySelector('#app'); 
     ReactDOM.render(<App />, mount); 
    </script> 
</body> 
</html>

出典

2017-11-14 21:15:57 Aymen

リンクされたスタイルシートのエラー - リソースは、スタイルシートとして解釈されず、基本的な次のMIMEタイプtext/plainの

答えて

関連する問題