IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
  • 登录 注册

    使用 VS CODE 建立你的第一個 ASP.NET Core Web API 專案

    winson发表于 2023-06-30 13:44:35
    love 0

    在上一篇文章裡,我已詳細說明了如何使用 VS Code 搭建 ASP.NET Core 的開發環境,現在,就讓我來說說如何建立一個完整的專案!在這裡不得不再次說一下,使用 VS CODE 做開發實在是太爽了:laughing:!OK,廢話少說,讓我們開始吧!

    建立專案

    1. 首先建立一個名為 Demo 的資料夾,接著在 VS Code 裡打開(我通常是直接將資料夾拖進 VS Code)。

    2. 點擊左側欄的 VS Code solution 按鈕,打開解決方案面板,接著點擊 Create New Solution 創建新的解決方案,名字就叫做 MyDemo.API。

    1. 在解決方案檔案上按右鍵,選擇 add new project。

    1. 選擇 asp.net core api,選擇 c#,然後輸入專案名稱,這裡我們用 MyDemo.API,之後會讓你輸入專案資料夾名稱,只要和專案名稱一樣即可。完成後就會建立一個完整的 ASP.NET Core 專案了。

    1. 建立完後,可點擊左側的偵錯按鈕,然後打開偵錯面板,裡面會有提示讓你建立相關偵錯檔案的按鈕。點擊 Generate C# Assets for Build and Debug 即可自動生成調試用的相關配置檔案

    1. 最後點擊 RUN AND DEBUG 的那個三角按鈕,測試一下專案是否能運行

    運行並測試API

    正常情況下,開啟調試後,會自動打開網頁並跳到 https://localhost:7241/ ,這時就會顯示 404 錯誤,這是因為在調試狀態時,會預設使用 SSL 的 URL 去訪問,這時端口就會指向 7241 ,但由於本地調試,並沒有配置相關的 SSL 憑證,所以自然此頁面是訪問不到的,因此這裡需要手動在瀏覽器裡輸入另一個沒有 SSL 的地址,如 http://localhost:5106,這2個地址是可以在調試信息欄裡看到的

    但很快你會發現,就算使用 http://localhost:5106 也是訪問不了,會自動又跳回到 https://localhost:7241 這裡了,原因是這本身就是一個 Web API 的專案,所以並沒有可直接訪問的頁面,但 .Net Core 默認集成了 Swagger,所以可使用以下地址方訪問到 Swagger 的文檔頁面,同時也可以在這裏做相關的 API 測試

    http://localhost:5106/swagger/index.html

    如果不清楚什麼是 Swagger,可到其官網瞭解下哦!

    CORS的问题

    OK,這時候 API 的頁面可以正常訪問了,可以看到此時有一個 API 呈現在我們眼前,這是創建新項目時默認添加的一個演示用的 API,然後我們可以直接點它進行測試,看看輸出效果是什麼。不過你會發現又有一個錯誤出現了

    如果直接調用此 API ,就會出現一個 CORS 的錯誤。CORS 是指跨來源資源共用(Cross-Origin Resource Sharing),簡單地説,就是當所調用的來源和被訪問的資源並不是在同一個網站域名之下的時候,系統就會做出限制訪問,這是完全出於安全性的考慮所做出的限制。舉個例子説明一下吧:

    假設今天有一個使用者登入某一銀行網站 www.bank.com ,同時他剛好在使用另一個不安全的網站例如 www.stolemoney.com ,如果沒有同源政策的話,這個 stolemoney 網站可能可以輕易地存取這個使用者在 www.bank.com 裡的資料。

    那要如何解決呢?在實際的 API 開發中,很多時是不可避免要進行非同源訪問的,解決辦法是在 program.cs 檔案裡添加以下程式碼,以充許進行 CORS 的訪問

    builder.Services.AddCors(o => o.AddPolicy("AllowCrosite", policy =>
            {
                policy.AllowAnyHeader()
                    .AllowAnyMethod()
                    .SetIsOriginAllowed(origin => true) // allow any origin
                    .AllowCredentials();
            }));

    然後在 app 裏添加使用 Cors

    app.UseCors("AllowCrosite");

    現在再重新開啓調試並嘗試運行之前的 API,就會看到有相關的返回結果哦

    到此,一個完整並能正常運作的 Web API 網站就建立好了,之後會再繼續介紹如何添加與資料庫訪問的功能!

    Loading



沪ICP备19023445号-2号
友情链接