Refused to apply style because its MIME type ('application/json') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

[gauravshah27]

npm ls http-proxy-middleware

+-- [email protected]
`-- [email protected]
  `-- [email protected]
    `-- [email protected]

Please verify that you've followed these steps

[x] - I've updated to latest http-proxy-middleware.

Describe the bug

I am using a combination of create-react-app + http-proxy-middleware for my application.

I am seeing the following issue

Refused to apply style from 'https://<app>.<domain>/static/css/main.a9d14d20.chunk.css' because its MIME type ('application/json') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

I was not seeing this issue with [email protected]. So I am not sure how to go about fixing this.

To Reproduce

Step-by-step reproduction instructions

1. take any create-react-app application that uses http-proxy-middleware
2. update http-proxy-middleware to 1.3.1
3. open the browser and find an unstyled app and the above mentioned error will be present on the browser console

Expected behavior

It should load the stylesheet from the main chunk and application should appear with the correct styles loaded.

http-proxy-middleware configuration

const {createProxyMiddleware} = require('http-proxy-middleware');

module.exports = function (app) {
  app.use(
    ['/api', '/login', '/loginSuccess', '/logout'],
    createProxyMiddleware({
      target: 'http://localhost:8080',
      changeOrigin: true,
      autoRewrite: true
    })
  );
};

Server (please complete the following information):

• OS: Windows
• NodeJS version: 14.16.1

[chimurai]

Don't think this issue is caused by http-proxy-middleware.
css chunks are coming from webpack / webpack-dev-server.

You might find your answer this thread: froala/angular-froala#170 (comment)

Adding <base href="/"> seems to help a lot of devs or removing the rel="stylesheet" attribute from the style <link /> tag

[gauravshah27]

@chimurai thanks for the quick reply. The reason I opened this issue against http-proxy-middleware is because I did not experience this issue against [email protected]. Its only when I updated the version from 1.3.0 to 1.3.1 that I started seeing the issue

I saw the commit and you are checking that a content-type is present and then comparing it to application/json. I am unsure on how do I solve this.

I have already looked at this thread: froala/angular-froala#170 (comment). However, the issue that I face is that I don't have access to webpack config because I am using CRA (create-react-app) and that uses react-scripts that abstracts away any webpack config that I have. So I was wondering if there is a setting I can apply at the proxy-middleware layer that will allow me to get past this issue.

[chimurai]

The commit you saw for 1.3.1 only contains a fix for fixRequestBody

Which is used like this.

const { createProxyMiddleware, fixRequestBody } = require('http-proxy-middleware');

const proxy = createProxyMiddleware({
  /**
   * Fix bodyParser
   **/
  onProxyReq: fixRequestBody,
});

It's basically dead code in your setup, since fixRequestBody isn't used in your configuration.

http-proxy-middleware is used in webpack-dev-server / prereact for its proxy functionality.
It's not responsible for serving the css chunks as far as I know.

Think your question should be asked in either prereact or webpack-dev-server.

To get better help, providing a minimal reproducible example would really help; Without one it's really difficult to investigate.

[chimurai]

Might be related to this maybe? webpack/webpack-dev-server#3168 (comment)

[chimurai]

Closing issue. Feel free reopen when a working reproducible example can be provided.