AngularJS Node 应用程序下载而不是在 Internet Explorer 中加载
Posted
技术标签:
【中文标题】AngularJS Node 应用程序下载而不是在 Internet Explorer 中加载【英文标题】：AngularJS Node app downloads instead of loading in Internet Explorer 【发布时间】：2017-06-23 14:47:11 【问题描述】：每当我尝试通过http://localhost:3000 加载我的 AngularJS 网页（在节点 js + express 服务器上）时，Internet Explorer 只会尝试使用随机名称且没有文件扩展名的方式下载，而不是显示实际页面。
我什至无法检查控制台是否有错误，因为下载尝试似乎在尝试将其加载为网页之前就开始了。
该网站在 Firefox 和 Chrome 上都能完美运行。我使用的是 Internet Explorer 11，所以它甚至不是旧版本。
我尝试通过W3 Validator 运行我的索引，它在 DOM 中指出的唯一错误是 Angular 指令和标签（它们并不是真正的错误）。
我尝试将 DOCTYPE 从简单的 <!DOCTYPE html> 更改为：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-loose.dtd">
还有这个：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
...还有这个：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
没有效果。
正如其他问题中所建议的，我还尝试在我的节点服务器中将我的页面作为“text/plain”而不是“text/html”提供，但这也没有帮助。
这是我的索引的 html：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it">
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<!-- Angular Material CSS now available via Google CDN; version 1.0.7 used here -->
<link rel="stylesheet" href="./modules/angular-material/angular-material.min.css"/>
<link rel="stylesheet" href="./css/style.css"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/>
<link rel="icon" href="icons/favicon.ico" type="image/x-icon"/>
<base href="/"/>
<title>Area Clienti</title>
<script src="./modules/angular/angular.js" type="text/javascript"></script>
<script src="./modules/ngstorage/ngStorage.js" type="text/javascript"></script>
<script src="./modules/angular-aria/angular-aria.min.js" type="text/javascript"></script>
<script src="./modules/angular-animate/angular-animate.min.js" type="text/javascript"></script>
<script src="./modules/angular-material/angular-material.min.js" type="text/javascript"></script>
<script src="./modules/angular-ui-router/release/angular-ui-router.min.js" type="text/javascript"></script>
<script src="./modules/ui-router-extras/release/modular/ct-ui-router-extras.core.min.js" type="text/javascript"></script>
<script src="./modules/ui-router-extras/release/modular/ct-ui-router-extras.dsr.min.js" type="text/javascript"></script>
<script src="./modules/ui-router-extras/release/modular/ct-ui-router-extras.sticky.min.js" type="text/javascript"></script>
<script src="./modules/pdfmake/build/pdfmake.min.js" type="text/javascript"></script>
<script src="./modules/pdfmake/build/vfs_fonts.js" type="text/javascript"></script>
<script src="./modules/angular-messages/angular-messages.min.js" type="text/javascript"></script>
<script src="http://ngmaterial.assets.s3.amazonaws.com/svg-assets-cache.js" type="text/javascript"></script>
<script src="./js/client.js" type="text/javascript"></script>
</head>
<body ng-app="App" ng-controller="AppCtrl" ng-view ui-view ng-cloak layout="row">
</body>
</html>
脚本标签之前在正文中，我尝试将它们放在头部以查看是否有帮助，但没有。
这可能是什么问题？为什么让东西在 IE 上运行如此痛苦？
编辑：这是服务器代码。
var express = require("express");
var fs = require('fs');
var xml2js = require("./node_modules/xml2js");
var auth = require("./authenticator.js");
var bodyParser = require('body-parser');
var app=express();
//app.use(express.static('pages'));
var server = app.listen(3000, function()
var host = server.address().address;
var port = server.address().port;
);
var jsonParser = bodyParser.json(); // to support JSON-encoded bodies
var urlencodedParser = bodyParser.urlencoded( // to support URL-encoded bodies
extended: true
);
app.get('/', function(req, res)
sendFile(res, './index.html', getHeader('text/plain'));
);
app.use('/font/', express.static('./font/'));
app.use('/modules/', express.static('./node_modules/'));
app.use('/css/', express.static('./css/'));
app.use('/views/', express.static('./views/'));
app.use('/img/', express.static('./img/'));
app.use('/js/', express.static('./js/'));
function sendFile(res, path, header)
fs.readFile(path, function(err, content)
if(err)
console.log("\nErrore caricando " + path + " - err: " + err);
//pageNotFound(res, "error");
else sendToClient(content, res, 200, header);
);
function getHeader(type)
return "Content-Type": type;
function sendToClient(data, res, code, type)
res.writeHead(code, getHeader(type));
(type === "text/html" || type === "text") ? res.end(data, "utf-8") : res.end(data);
加上一堆我认为不相关的其他 POST 和 GET 服务
更新：我设法让它在开发者控制台中说些什么。这是错误：
（翻译：无法打开http://localhost:3000/） 它仍会尝试下载该页面。
更新 2：
我设法找出问题所在：由于某种原因，Content-Type 标头内容被解释为一个对象，而不是它实际的字符串，因此 IE 无法呈现页面。
它现在呈现索引，但 Angular-UI-Router 似乎不起作用。
似乎 ui-router 无法加载子状态（但它可以在正常状态之间切换，因为我能够登录并转移到我的仪表板页面，这是一个不同的状态）
（在 Chrome 和 Firefox 上一切正常）
【问题讨论】：
显示您用于加载 index.html 的 Node/Express 代码 @AlexanderStaroselsky 对不起，我忘了把服务器端代码放进去。编辑了问题 您可以尝试将index.html 发送到express.static 语句之后吗？您还可以尝试使用默认的 Express sendFile() 而不使用任何 res.writeHead() 和内容类型设置，看看是否有效？只需app.use('*', function (req, res) res.sendFile('path/to'file'); ); 并在设置静态资源路径之后。
@AlexanderStaroselsky 问题出在我的函数 getHeader 上。我只是保留了我的 sendFile 方法，但是我没有使用 getHeader，而是手动编写了 'Content-Type':type。查看更新的问题
好的，很高兴听到这个消息。您可能希望将其作为一个单独的问题发布，以识别路由器配置问题。
【参考方案1】：
它会不会因为您正在使用 .sendFile() 而向您发送文件：
app.get('/', function(req, res)
sendFile(res, './index.html', getHeader('text/plain'));
);
而不是使用 .render() 来渲染页面？
app.get('/', function (req, res)
res.render('index.html');
)
【讨论】：
请注意，sendFile 是我创建的自定义函数，为了清楚起见，我将其添加到问题中 对不起，我用ejs渲染==> app.engine('html', require('ejs').renderFile);你还需要 npm install ejs ......【参考方案2】：尝试使用 Express 的 use() 始终通过 sendFile() 在使用 * 通配符的 任何 HTTP 操作之后发送 index.html。确保这在任何其他 API REST 路由或类似路由之后进行。这有助于确保 index.html 中的 Angular 应用程序不会被其他正在渲染的页面不断地重新加载。这样，任何其他 API 路由都可以发送/接收您需要的数据，并且只有在没有其他匹配项的情况下，才会加载 index.html。下面是一个适用于我的 Express + Angular 2 应用程序的结构。
文件结构：
api
foo
foo.js
bar
bar.js
public
fonts
css
img
index.html
server.js
服务器 JS：
app.use(bodyParser.json());
app.use(bodyParser.urlencoded( extended: false ));
app.use(cookieParser());
// fonts, css, images are stored in respective folders within folder "public"
app.use(express.static(path.join(__dirname, 'public')));
// some RESTful endpoints
app.use('/api/foo', fooRoutes);
app.use('/api/bar', barRoutes);
app.use('*', (req, res) => res.sendFile(path.join(__dirname, 'public', 'index.html')));
// error handling middleware
app.use(function(req, res, next)
var err = new Error('Not Found');
err.status = 404;
next(err);
);
【讨论】：
以上是关于AngularJS Node 应用程序下载而不是在 Internet Explorer 中加载的主要内容，如果未能解决你的问题，请参考以下文章
从 url 下载文件并将其上传到 AWS S3 而不保存 - node.js
为啥使用 JWT 而不是在 DB 中存储令牌来授权 Node.js 中的访问令牌？
Node wss Websocket 在桌面上工作，而不是在移动设备上