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

我使用环回作为后端api，使用angular2作为前端

我使用环回也为我的angular2前端服务

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

所以我得到了这个错误：

我完全理解为什么会出现这个错误，因为一旦环回加载了我的index.html，angular2就会启动，并且知道如何处理这些类型的URL，因为这是在我的app.routing.ts文件中指定的。但是，当直接访问此链接时，angular2不会启动，环回不知道如何处理此类URL

因此，我在server.js中的环回代码中添加了代码，以将所有请求重定向到我用于环回的/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;
}

我理解这个错误，但不知道为什么我会收到这个，也不知道如何修复它

这是我的环回后端的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": {}
  }
}

根据，“路由应用程序必须回退到index.html”。这意味着，如果环回无法“获取”或导致任何类型的404，则意味着环回不理解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重定向应用程序

根据，“路由应用程序必须回退到index.html”。这意味着，如果环回无法“获取”或导致任何类型的404，则意味着环回不理解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重定向应用程序

我一直在尝试通过禁用一些安全设置来玩弄头盔选项，只是为了看看它是否有效，但我仍然收到了相同的问题。不要手动将问题标记为“已解决”。相反，你应该将答案标记为“已接受”。@crashmstr好的，我会在2天内。我一直在尝试通过禁用一些安全设置来玩弄头盔选项，只是为了看看它是否有效，但我仍然得到相同的问题。不要手动将问题标记为“已解决”。相反，你应该将答案标记为“已接受”。@crashmstr好的，我会在2天后回答