在AngularJS中使用適用於角度HTML5模式的節點重寫IIS URL

我有一個基於Azure（IIS）託管並使用HTML5模式的Node.JS上構建的AngularJS應用程序。在情況下，我不使用Node.js的，只是使用與IIS AngularJS我可以重寫URL，這樣使用在IIS Web.config中的以下規則刷新頁面不會導致404錯誤：在AngularJS中使用適用於角度HTML5模式的節點重寫IIS URL

<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中使用上述規則，也會在頁面刷新時出現錯誤，例如「Can not GET/myroute」。有什麼我需要在Server.js中配置或Web.config中的不同規則。

以下是我目前在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作爲一個實踐問題發生，但他們這樣做，我需要考慮到這一點。

來源

2015-09-11 Kode

不，你必須在node.js中配置它。一旦請求被傳遞給node.js，web.config將不執行任何操作。 –

你有一個如何做到這一點的例子嗎？ – Kode

我不這樣做，但它通常只是一個簡單的app.get（追蹤你的路線並呈現index.html而不是給出404的中間件） –

我已經試驗，這是什麼工作對我來說：

的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>

快遞

靜態文件服務器+ 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。

來源

2015-09-11 19:54:09

我試過這個，但它對我沒有用，我使用的是Express 4並會在我原來的帖子中發佈相應的代碼。 – Kode

@Kode這絕對適用於我。我在這裏有一個例子：https：//github.com/futurechan/how-to-node/tree/master/leveraging-gulp它不包括web.config，但我可以通過iisnode將其部署到iis，幷包括上面的web.config，它的工作原理。 –

謝謝，我剛剛通過另一種方法得到它的工作現在發佈答案 – Kode

在進一步挖掘時，我不需要Web配置。我有這個在我的server.js提起連接到角索引文件：

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

來源

2015-09-23 15:10:43 Kode

它doesn 'text/html'的請求會轉到靜態文件中，如果沒有找到匹配項，那麼你需要爲index.html提供服務請求'application/json'無論順序如何都可以進入路線。 –

在AngularJS中使用適用於角度HTML5模式的節點重寫IIS URL

回答

相關問題