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时，我收到错误，例如＆＃34;无法获取/ myroute＆＃34;页面刷新，即使在IIS中使用上述规则。我需要在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 rewrite中的静态文件服务器

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 serve the static files。

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');
});

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

2 个答案: