web-dev-qa-db-ja.com

ブロックされたCSSファイル：MIMEタイプの不一致（X-Content-Type-Options：nosniff）

Angular 4アプリを開発していますが、グローバルスタイルを適用したいです。 angularサイトの チュートリアルに続いて 、アプリのルートディレクトリに「styles.css」ファイルを作成し、それを参照しています。私のアプリのindex.htmlのスタイルシート：

<link rel="stylesheet" type="text/css" href="styles.css">

angularアプリが正常にコンパイルされました：

$ ng serve 
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200 **
[...]
webpack: Compiled successfully.

しかし、Chromiumブラウザで http：// localhost：4200 にアクセスすると、コンソールに次のエラーが表示されます。

GET http://localhost:4200/styles.css

Firefoxブラウザーでは、エラーはもう少し明確です。

GET 
http://localhost:4200/styles.css [HTTP/1.1 404 Not Found 15ms]
The resource from "http://localhost:4200/styles.css" was blocked due to MIME type mismatch (X-Content-Type-Options: nosniff).

Index.htmlとstyles.cssの両方のファイルは、私のangularアプリのルートディレクトリにあります。私は 問題に関する詳細情報を取得しようとしました ：

nosniff
    Blocks a request if the requested type is

        "style" and the MIME type is not "text/css", or
        "script" and the MIME type is not a JavaScript MIME type.

しかし、スタイルシートを参照するときにtype="text/css"を指定したため、なぜリクエストがブロックされているのか理解できません。

cssnode.jsangularexpressmime-types
9
rodrunner

私はちょうど同じ問題に遭遇しました。 「nodejs express css mime type」でウェブを検索したときのヒット数から判断すると、いくつかの異なる理由で現れる可能性のある Express の癖に見えます。

かかわらず type="text/css"属性に<link要素、ExpressはCSSファイルを次のように返します

Content-Type: "text/html; charset=utf-8"

一方、それは本当にそれを返す必要があります

Content-Type: "text/css"

私にとって、迅速で汚い回避策は、単にrel=属性、つまり変更

<link rel="stylesheet" type="text/css" href="styles.css">

に

<link type="text/css" href="styles.css">

テストにより、CSSファイルがダウンロードされ、スタイルが実際に機能することが確認されました。これは、私の目的には十分でした。

13
Gord Thompson

rel = "stylesheet"も削除し、MIMEタイプのエラーは表示されなくなりましたが、スタイルが読み込まれていません

4
Fer Cervantes

（開発中の）フルスタックWebアプリケーションで同じ種類の問題に遭遇したとき、私はcssファイルをレンダリングされたページに正しくリンクすることで単純に問題を解決しました。上記のようにrel = stylesheetを削除すると、ブラウザーにエラーが表示されなくなりますが、ページに適用するスタイルは読み込まれません。要するに、それは解決策ではありません。

express-staticを使用している場合、これを例として使用できます。

サーバー側：

app.use(express.static(__dirname + "/public", {
    index: false, 
    immutable: true, 
    cacheControl: true,
    maxAge: "30d"
}));

クライアント側：

 <link type="text/css" rel="stylesheet" href="/main.css">

Htmlページにリンクするファイルの前にスラッシュを追加するだけで（template enginesを使用せずにhtmlページをレンダリングする場合）、express-staticが残りを自動的に行います。

2
rags2riches

Rel = "stylesheet"を削除することを提案する回答もありましたが、それではうまくいきませんでした。 expressjsドキュメントによると、 https://expressjs.com/en/starter/static-files.htmlexpress.static関数を使用して、CSS、JavaScriptなどの静的ファイルを提供します。 。

app.use(express.static('public'))

そこから、たとえば{PROJECT_PATH}/public/css/ディレクトリ内にstyle.cssファイルがある場合、パブリックディレクトリの下に任意のファイルをロードできるはずです。

http://localhost:3000/css/style.cssは機能します。

1
Mohyddin

私の場合、以下のコードブロックを逆の順序で混乱させていたため、このエラーが発生していました。この問題がある場合は、次の順序に従ってください。

1。

 app.use(express.static(path.join(__dirname, 'public')));

2。

app.get('*', (req, res) => {
   res.sendFile(path.join(__dirname, 'public/index.html'));
});

3。

app.use('/api', cors(corsOptions), indexRouter);
0
sudeep123

Angularアプリ。最終的には「404 Not Found」エラー。

私の場合、スクリプトファイルを「assets」フォルダ以外の場所に置くと、404が発生し、最終的にMIMEタイプエラーが発生しました。 index.htmlのheadセクションで次のタグが機能しました。

<script src="assets/plugins/jquery.min.js" type="text/javascript"></script>

アセットフォルダーは、Index.htmlファイルの兄弟です。

0
DaveIIi