CSS file locked: MIME type mismatch (X-Content-Type-Options: nosniff)

Question

I am developing an Angular 4 application and want to apply some global styles. Following the instructions on the corner site , I created the "styles.css" file in the root directory of my application, and I refer to this stylesheet in the index.html of my application:

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

Corner application successfully compiled:

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

But when I go to http: // localhost: 4200 in the Chromium browser, an error message is displayed on the console

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

In Firefox, the error is a bit more obvious:

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).

Both files, index.html and styles.css, are in the root directory of my angular application. I tried to get more information about the problem :

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" .

Answer 1

. , Express, , "nodejs express css mime type".

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 , , .

Answer 2

rel = "stylesheet", MIME,

Answer 3

rel= "stylesheet", . expressjs: https://expressjs.com/en/starter/static-files.html express.static , CSS, JavaScript, .....

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

, , , style.css {PROJECT_PATH}/public/css/

http://localhost:3000/css/style.css .

Answer 4

- ( ), , 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- ( html- - template engines), Express-static .

Answer 5

javascript ( css) Angular. Mime ( ), "404 Not Found".

, "assets", 404 , , mime-. index.html:

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

Index.html.

Answer 6

, . , ,

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);