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

Question

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

我正在使用loopback来服务我的angular2前端。

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

所以我得到这个错误：

我明白了100％，为什么我得到这个错误，因为一旦回送负荷我的index.html，然后angular2自举，并且知道如何处理这些类型的网址，因为这是在我的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的”。这意味着如果回送不能“获得”或导致任何类型的404，这意味着回送不理解该网址，它需要“回退”到angular2或angular4应用程序的index.html。

要解决这个问题，您将不得不添加自定义中间件来将环回重定向到您的角度索引，以便角度路由器可以从那里取回它。

在 middleware.json文件

因此，更改以下：

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

内。然后添加一个文件custom404.js /服务器/中间件/，这样的完整路径是/服务器/中间件/ 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(); 
      } 
     }); 
    }; 
}; 

这回重定向到您的角度应用程序，并能正确路线的网址，同时仍然被回送服务的角度的路由器。

重要

因此不再需要通过server.js重定向程序，我试图在上面的开放问题呢！