在AngularJS中用Angular HTML5模式的节点重写IIS URL

Question

我有一个基于Node.JS构建的AngularJS应用，该应用托管在Azure（IIS）中并使用HTML5模式。 在不使用Node.JS且仅将AngularJS与IIS结合使用的情况下，我可以重写URL，以使页面刷新不会在IIS Web.config中使用以下规则导致404错误：

<rule name="AngularJSHTML5Mode" stopProcessing="true">
      <match url=".*"/>
      <conditions logicalGrouping="MatchAll">
        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true"/>
        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true"/>
        <add input="{REQUEST_URI}" pattern="^/(api)" negate="true"/>
      </conditions>
      <action type="Rewrite" url="/"/>
</rule>

但是，当在Node.js（与ExpressJS）一起使用Angular时，即使在IIS中使用上述规则，页面刷新时也会出现诸如“ Cannot GET / myroute”的错误。 是否需要在Server.js中进行配置或在Web.config中进行其他配置？

这是我目前在Express中拥有的东西。 我正在使用Express 4：

// Initialize Express App
var app = express();

var listener = app.listen(1337, function () {
    console.log('Listening on port ' + listener.address().port); //Listening on port 1337
});

app.use(express.static(__dirname + "/public"));

我知道实际上不应该在SPA中进行页面刷新，但是这样做确实需要，因此我需要对此进行说明。

Answer 1

我做了实验，这对我有用：

web.config（site.js是我的节点应用程序的入口点）

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <httpErrors existingResponse="PassThrough" />

        <iisnode nodeProcessCommandLine="&quot;c:\program files\nodejs\node.exe&quot;" watchedFiles="*.js" 
      interceptor="&quot;%programfiles%\iisnode\interceptor.js&quot;" promoteServerVars="LOGON_USER"/>
        <handlers>
            <add name="iisnode" path="site.js" verb="*" modules="iisnode" />
        </handlers>

        <rewrite>
            <rules>
                <clear />
                <rule name="default">
                    <match url="/*" />
                    <conditions logicalGrouping="MatchAll" trackAllCaptures="false" />
                    <action type="Rewrite" url="site.js" />
                </rule>
            </rules>
        </rewrite>

        <security>
            <requestFiltering>
                <hiddenSegments>
                    <add segment="node_modules" />
                </hiddenSegments>
            </requestFiltering>
        </security>
    </system.webServer>
</configuration>

Express + URL重写中的静态文件服务器

app.use(express.static(clientDir));

// for SPA
app.get('/*', function(req,res, next){
    res.format({
        html: function(){
            res.sendFile(path.join(clientDir, 'index.html'));
        },
        json: function(){
            next();
        }
    });
});

//routes...

我还尝试在iis中使用虚拟应用程序实现url重写。 这行不通。 取而代之的是，我必须在节点模块内配置一条路径，以去除路由的前导部分。

但是，一旦应用程序启动，您就可以让iis提供静态文件 。

Answer 2

经过进一步的研究，我不需要Web配置。 我的server.js中有这个文件，用于建立与Angular索引文件的连接：

var app = express();

app.use(express.static(__dirname + "/public"));


var listener = app.listen(1337, function () {
    console.log('Listening on port ' + listener.address().port); //Listening on port 1337
});

这部分至关重要，在所有GET，POST等操作的末尾。我将其添加为最后一个功能。 它必须是最后一个，因为它包含了所有内容，如果将其放在GET或POST函数之前，它将不会被视为Express而是一条折断的Angular路由，并且如果您的App.js配置正确，则会路由到主页（不需要）：

// Placed at end for routing non-Express calls/AngularJS refreshes
app.use('/*', function (req, res) {
    res.sendFile(__dirname + '/public/index.html');
});