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

Question

我将回送用作后端api，将angular2用作前端。

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

效果很好，但是，一旦刷新页面，回送就不知道如何处理该网址，因为这是angular的工作，而不是回送。

所以我得到这个错误：

我100％理解为什么会收到此错误，因为一旦环回加载了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;
}

这有效，但是，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” 。 这意味着如果环回无法“获取”或导致任何类型的404，则意味着环回无法理解url，因此需要“回退”到angular2或angular4应用程序的index.html。

要解决此问题，您将必须添加自定义中间件，以将环回重定向到您的角度索引，以便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的路由器将正确路由该网址，同时仍由环回服务。

重要

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