Rewrite requests from loopback to angular2 (Refused to execute script because its MIME type ('text/html') is not executable)

Janpan

I am using loopback as a backend api and angular2 as a frontend.

I am using loopback to also serve my angular2 frontend.

This works fine, however, once I refresh a page, loopback does not know how to handle the url because this is angular's job, not loopback.

So I get this error :

enter image description here

I understand 100% why I get this error, because once loopback loads my index.html, then angular2 is bootstrapped and knows how to handle those type of URLs because this is specified in my app.routing.ts file. However, when this link is directly accessed, angular2 is not bootstrapped and loopback does not know how to handle this type of URL.

So I have added code in my loopback code in server.js to redirect all requests to angular except /api that I use for loopback.

Here is the code :

var path = require('path');

var ignoredPaths = ['/api'];

app.all('/*', function(req, res, next) {
  //Redirecting to index only the requests that do not start with ignored paths
  if(!startsWith(req.url, ignoredPaths))
    res.sendFile('index.html', { root: path.resolve(__dirname, '..', 'client') });
  else
    next();
});

function startsWith(string, array) {
  for(let i = 0; i < array.length; i++)
    if(string.startsWith(array[i]))
      return true;
  return false;
}

This works, however, the index.html page is not loaded and I get the following console errors :

Refused to execute script from 

'http://localhost:3000/inline.bundle.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
59074ce…:1 Refused to execute script from 'http://localhost:3000/polyfills.bundle.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
59074ce…:1 Refused to execute script from 'http://localhost:3000/scripts.bundle.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
59074ce…:1 Refused to execute script from 'http://localhost:3000/styles.bundle.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
59074ce…:1 Refused to execute script from 'http://localhost:3000/vendor.bundle.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
59074ce…:1 Refused to execute script from 'http://localhost:3000/main.bundle.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

I understand the error, but dont know why i am receiving this and dont know how to fix this.

This is my middleware.json file for my loopback backend:

{
  "initial:before": {
    "loopback#favicon": {}
  },
  "initial": {
    "compression": {},
    "cors": {
      "params": {
        "origin": true,
        "credentials": true,
        "maxAge": 86400
      }
    },
    "helmet#xssFilter": {},
    "helmet#frameguard": {
      "params": [
        "deny"
      ]
    },
    "helmet#hsts": {
      "params": {
        "maxAge": 0,
        "includeSubdomains": true
      }
    },
    "helmet#hidePoweredBy": {},
    "helmet#ieNoOpen": {},
    "helmet#noSniff": {},
    "helmet#noCache": {
      "enabled": false
    }
  },
  "session": {},
  "auth": {},
  "parse": {
    "body-parser#json": {},
    "body-parser#urlencoded": {"params": { "extended": true }}
  },
  "routes": {
    "loopback#rest": {
      "paths": [
        "${restApiRoot}"
      ]
    }
  },
  "files": {
    "loopback#static": {
      "params": "$!../client/"
    }
  },
  "final": {
    "loopback#urlNotFound": {}
  },
  "final:after": {
    "strong-error-handler": {}
  }
}
Janpan

According to angular.io docs, "Routed apps must fallback to index.html". This means that if loopback cannot "GET" or result in any type of 404, it means that loopback does not understand the url and it needs to "fallback" to the index.html of the angular2 or angular4 app.

To fix this, you will have to add custom middleware to redirect loopback to your angular index so that angular's router can take it from there.

So in your middleware.json file, change the following :

"final": {
    "./middleware/custom404": {}
    }

Then add a file custom404.js inside /server/middleware/ so that the full path is /server/middleware/custom404.js . If the middleware directory does not exist, create it.

Then inside the custom404.js file :

'use strict';
module.exports = function () {
    var path = require('path');
    return function urlNotFound(req, res, next) {
        let angular_index = path.resolve('client/index.html');
        res.sendFile(angular_index, function (err) {
            if (err) {
                console.error(err);
                res.status(err.status).end();
            }
        });
    };
};

This will redirect back to your angular app and angular's router will route the url correctly while still being served by loopback.

Important

It is therefore no longer needed to redirect the app via server.js as I tried to do in the opening question above !

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Refused to execute script, strict MIME type checking is enabled?

Importing jQuery plugin into Angular 2+ Refused to execute script because its MIME type ('text/html') is not executable

Refused to execute script from '*' because its MIME type ('application/json') is not executable, and strict MIME type checking is enabled

Refused to execute script from '*.ts' because its MIME type ('video/vnd.dlna.mpeg-tts') is not executable

Error on minification in console "Refused to execute because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled"

Webpack dev server throws error - Refused to execute script because its MIME type ('text/html') is not executable

Node/Express - Refused to apply style because its MIME type ('text/html')

Refused to apply style from... because its MIME type ('text/html') is not a supported style-sheet MIME type, and strict MIME checking is enabled

Refused to apply style from '' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled

Refused to execute script from because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled

Refused to apply style because its MIME type "text/html" is not supported stylesheet MIME type, and strict MIME checking is enabled

Node refused to apply style because its MIME type ('text/html') is not a supported stylesheet MIME

Refused to execute script from 'file_name.php' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled

Refused to execute script because strict MIME type checking is enabled

Refused to apply style from 'http://localhost:1234/node_modules/primeicons/primeicons.css' because its MIME type ('text/html')

Tensorboard is showing a blank page (Refused to execute script from 'http://localhost:6006/index.js' because its MIME type)

Refused to execute *path_to_bundle* as script because "X-Content-Type: nosniff" was given and its Content-Type is not a script MIME type

Refused to execute script from '..../angular.min.js' because its MIME type ('application/octet_stream') is not executable, and strict MIME type check

Refused to apply style from 'http://localhost:3000/style.css' because its MIME type ('text/html')

Chrome and Spring security: Refused to execute script from 'http://<server url>/assets/app.js' because its MIME type ('') is not executable

Refused to execute script from URL because its MIME type ('application/json') is not executable, and strict MIME type checking is enabled

Refused to apply style from [Link] because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled

Refused to execute script from 'url' because its MIME type ('image/jpeg') is not executable

Webpack + React.lazy + nested routing: Refused to apply style from '*/css/main.css' because its MIME type ('text/html')

Refused to apply style from 'URL' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled

Refused to apply style because its MIME type ('text/html') is not a supported stylesheet MIME type

"Refused to apply style from because its MIME type "('font/woff2')" is not a supported stylesheet MIME type, and strict MIME checking is enabled"

Refused to display style because MIME type

(Node Express)Refused to apply style because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled