歡迎光臨
每天分享高質量文章

ASP.NET Core 中的靜態檔案

1.前言

當我們創建Core專案的時候,Web根目錄下會有個wwwroot檔案目錄,wwwroot檔案目錄裡面預設有HTML、CSS、IMG、JavaScript等檔案,而這些檔案都是Core提供給客戶端使用的靜態檔案。但是這些靜態檔案需要在Core裡面配置才可以對外公開訪問。

2.設置靜態檔案目錄

靜態檔案都儲存在Core Web根目錄中。預設目錄是/wwwroot,但可通過 UseWebRoot方法更改訪問目錄。而content_root是指web專案的所有檔案夾,包括bin和wwwroot檔案夾。

2.1 設置預設靜態檔案目錄

如果我們需要更改預設目錄,該如何更改呢?讓我們來看看如下示例,現在有wwwroot預設目錄和新建MyStaticFiles目錄:

然後配置如下代碼:

public class Program
{
    public static void Main(string[] args)
    {
        CreateWebHostBuilder(args).Build().Run();
    }
    public static IWebHostBuilder CreateWebHostBuilder(string[] args) =>
        WebHost.CreateDefaultBuilder(args)
            .UseStartup()
.UseWebRoot(Directory.GetCurrentDirectory() + @"\MyStaticFiles\");//更改預設目錄(wwwroot)路徑方法,如果不需要更改,則註釋這段代碼。
}
//需要在Startup.Configure配置靜態檔案中間件。預設已配置,所以一般不用手動添加。
public class Startup
{
    public void Configure(IApplicationBuilder app)
    {
       app.UseStaticFiles();
    }
}

在Web主機在構建站點的時候,我們通過UseWebRoot方法把預設訪問靜態檔案路徑/wwwroot更改為新建的/MyStaticFiles檔案路徑,再通過Startup.Configure方法配置靜態檔案中間件讓其公開可以訪問。通過專案運行,我們可以在瀏覽器地址欄上看到如下表格響應結果:

根目錄

URL上圖片鏈接

更改預設目錄前是否能打開圖片鏈接

更改預設目錄後是否能打開圖片鏈接

/wwwroot

https://localhost:5001/images/1.jpg

不能

/MyStaticFiles

https://localhost:5001/images/2.jpg

不能

由上面表格結果,我們可以看到,未更改靜態檔案預設訪問目錄前,/wwwroot目錄下的靜態檔案(HTML、CSS、IMG、JavaScript等)是可以訪問的,而/MyStaticFiles下的靜態檔案是不可訪問的。但是更改為/MyStaticFiles目錄訪問路徑後,/wwwroot目錄下的靜態檔案就訪問不到了。下麵我們在來看看如何配置訪問Web根目錄外的檔案。

2.2 設置訪問Web根目錄外的檔案

有時可能因為業務需求原因,為了區分預設靜態檔案,我們想要在Web根目錄下新建一個靜態檔案夾處理業務。該如何配置呢?現在我們來瞭解下。
在2.1節點示例演示的時候,新建了一個MyStaticFiles目錄,現在就拿這個目錄來演示,請按如下方式配置靜態檔案中間件:

public void Configure(IApplicationBuilder app)
{
    //設置預設靜態檔案
app.UseStaticFiles(); 
//設置自定義靜態檔案
    app.UseStaticFiles(new StaticFileOptions
    {
        FileProvider = new PhysicalFileProvider(
            Path.Combine(Directory.GetCurrentDirectory(), "MyStaticFiles")),
        RequestPath = "/StaticFiles" //重寫了一個虛擬路徑。
    });
}

由上述代碼可知,MyStaticFiles目錄通過StaticFiles URI段公開。請求 http:///StaticFiles/images/2.jpg提供 2.jpg 檔案。也就是說在設置自定義靜態檔案中間件同時並不影響設置預設靜態檔案中間件。

3.設置HTTP響應標頭

Core提供了StaticFileOptions物件可用於設置HTTP響應標頭。除配置從Web根目錄提供靜態檔案外,以下代碼還設置Cache-Control標頭,例如設置靜態檔案快取時間:

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    var cachePeriod = env.IsDevelopment() ? "600" : "604800";
    app.UseStaticFiles(new StaticFileOptions
    {
        OnPrepareResponse = ctx =>
        {
            // Requires the following import:
            // using Microsoft.AspNetCore.Http;
            ctx.Context.Response.Headers.Append("Cache-Control", $"public, max-age={cachePeriod}");//(秒)
        }
    });
}

代碼中{cachePeriod}是設置瀏覽器快取時間,這裡我們設置為10分鐘(600秒)快取時間:

通過瀏覽器輔助工具可以看到Response Headers設置了快取時間。

4.靜態檔案授權

在之間第四章節,我們提到過,靜態檔案中間件一般在身份驗證/授權中間件之前設置,所以靜態檔案不需要驗證,但是比如我們需要Controller控制器授權提供檔案信息,該如何設置?請看如下代碼:

[Authorize]
public IActionResult BannerImage()
{
    var file = Path.Combine(Directory.GetCurrentDirectory(), 
                            "MyStaticFiles", "images", "banner1.svg");
    return PhysicalFile(file, "image/svg+xml");
}

傳回結果:

 

5.啟用目錄瀏覽

通過目錄瀏覽,Web應用的用戶可查看目錄串列和指定目錄中的檔案。出於安全考慮,目錄瀏覽預設處於禁用狀態,啟用目錄瀏覽是有風險的。呼叫Startup.Configure中的UseDirectoryBrowser方法來啟用目錄瀏覽:

public void Configure(IApplicationBuilder app)
{
     //第一個呼叫提供wwwroot檔案夾中的靜態檔案。
   app.UseStaticFiles(); 
   //第二個呼叫使用URL http:///MyImages瀏覽wwwroot/images檔案夾的目錄。
    app.UseStaticFiles(new StaticFileOptions
    {
        FileProvider = new PhysicalFileProvider(
            Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "images")),
        RequestPath = "/MyImages"
    });
    app.UseDirectoryBrowser(new DirectoryBrowserOptions
    {
        FileProvider = new PhysicalFileProvider(
            Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "images")),
        RequestPath = "/MyImages"
    });
}

呼叫Startup.ConfigureServices中的AddDirectoryBrowser方法來添加所需服務:

public void ConfigureServices(IServiceCollection services)
{
    services.AddDirectoryBrowser();
}

上述代碼允許使用URL http:///MyImages瀏覽wwwroot/images檔案夾的目錄,並鏈接到每個檔案和檔案夾:

6.設置靜態檔案預設文件

6.1設置預設文件

在Core設置預設主頁為訪問者訪問網站時提供了起點,這種情況跟IIS上設置站點預設文件是一樣的。若要在用戶不完全限定URI的情況下提供預設頁面,請呼叫Startup.Configure中的UseDefaultFiles方法:

public void Configure(IApplicationBuilder app)
{
    //要提供預設檔案,必須在UseStaticFiles前呼叫UseDefaultFiles。UseDefaultFiles實際上    //用於重寫URL,不提供檔案。通過UseStaticFiles啟用靜態檔案中間件來提供檔案。
    app.UseDefaultFiles();
    app.UseStaticFiles();
}

在wwwroot目錄下新增一個default.html頁面。這裡要註意一點是,添加預設文件名稱一樣要跟IIS上預設文件名稱(default.htm,default.html,index.htm,index.html)都一致,否則如果自定義名稱,會預設打開路由預設路徑地址。

6.2更改預設文件名稱

6.1小節提到一個點,添加預設文件都要跟IIS上預設名稱一致,但是如果我們需要自定義預設文件名稱呢?該如何設置?以下代碼將預設檔案名更改為mydefault.html:

public void Configure(IApplicationBuilder app)
{
    // Serve my app-specific default file, if present.
    DefaultFilesOptions options = new DefaultFilesOptions();
    options.DefaultFileNames.Clear();
    options.DefaultFileNames.Add("mydefault.html");
    app.UseDefaultFiles(options);
    app.UseStaticFiles();
}

7.UseFileServer

Core提供了UseFileServer物件,這個物件集成了UseStaticFiles、UseDefaultFiles和 UseDirectoryBrowser的功能。下麵我們通過代碼來看看如何使用。
提供靜態檔案和預設檔案。未啟用目錄瀏覽
app.UseFileServer();
通過啟用目錄瀏覽基於無引數多載進行構建
app.UseFileServer(enableDirectoryBrowsing: true);
啟用靜態檔案、預設檔案和及 MyStaticFiles 的目錄瀏覽示例代碼

public void ConfigureServices(IServiceCollection services)
{
    services.AddDirectoryBrowser();
}
public void Configure(IApplicationBuilder app)
{
    app.UseStaticFiles(); // For the wwwroot folder

    app.UseFileServer(new FileServerOptions
    {
        FileProvider = new PhysicalFileProvider(
            Path.Combine(Directory.GetCurrentDirectory(), "MyStaticFiles")),
        RequestPath = "/StaticFiles",
        EnableDirectoryBrowsing = true
    });
}

響應結果就不截圖多說了,寫那麼久也累了。因為2-6小節也有示例,大家就自行測試吧。

參考文獻:
ASP.NET Core 中的靜態檔案

赞(0)

分享創造快樂