将请求从环回重写为 angular2（拒绝执行脚本，因为它的 MIME 类型（'text/html'）不可执行）

Question

我使用 loopback 作为后端 api，使用 angular2 作为前端。

我正在使用环回服务我的 angular2 前端。

这很好用，但是，一旦我刷新页面，loopback 不知道如何处理 url，因为这是 angular 的工作，而不是 loopback。

所以我得到了这个错误：

我 100% 理解为什么会出现此错误，因为一旦 loopback 加载了我的 index.html，然后 angular2 就会被引导并知道如何处理这些类型的 URL，因为这是在我的 app.routing.ts 文件中指定的。但是，当直接访问这个链接时，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，“路由应用必须回退到 index.html”。这意味着如果 loopback 不能“GET”或导致任何类型的 404，则意味着 loopback 不理解 url，它需要“回退”到 angular2 或 angular4 应用程序的 index.html。

要解决此问题，您必须添加自定义中间件以将环回重定向到您的 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 重定向应用程序，就像我在上面的开始问题中尝试做的那样！