重寫請求從回送到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重定向程序，我試圖在上面的開放問題呢！