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

Question

我正在使用环回作为后端 api 和 angular2 作为前端。

我正在使用环回来为我的 angular2 前端提供服务。

这工作正常，但是，一旦我刷新页面，环回不知道如何处理 url，因为这是 angular 的工作，而不是环回。

所以我得到这个错误：

我 100% 理解为什么会出现此错误，因为一旦环回加载我的 index.html，然后 angular2 将被引导并知道如何处理这些类型的 URL，因为这是在我的 app.routing.ts 文件中指定的。但是直接访问这个link的时候，angular2并没有自举，loopback不知道如何处理这种URL.

所以我在 server.js 中的环回代码中添加了代码，以将所有请求重定向到 angular 除了我用于环回的 /api。

这是代码：

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

这有效，但是 index.html 页面未加载，我收到以下控制台错误：

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.

我明白这个错误，但不知道为什么我会收到这个并且不知道如何解决这个问题。

这是我的 middleware.json 环回后端文件：

{
  "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": {}
  }
}

Answer 1

根据angular.io docs、"Routed apps must fallback to index.html"。这意味着如果环回不能"GET"或导致任何类型的404，这意味着环回不理解url并且它需要"fallback"到index.html angular2 或 angular4 个应用程序。

要解决此问题，您必须添加自定义中间件以将环回重定向到您的 angular 索引，以便 angular 的路由器可以从那里获取它。

因此，在您的 middleware.json 文件中，更改以下内容：

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

然后在 /server/middleware/ 中添加一个文件 custom404.js 以便完整路径为 /server/middleware/custom404.js 。如果中间件目录不存在，则创建它。

然后在 custom404.js 文件中：

'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();
            }
        });
    };
};

这将重定向回您的 angular 应用，并且 angular 的路由器将正确路由 url，同时仍由环回提供服务。

重要

因此不再需要通过 server.js 重定向应用程序，就像我在上面的开头问题中尝试做的那样！