我所要講述的是，基于.net core3.1環境下的webapi專案，如何去使用axios對接前端的vue專案
既然談到axios，這里貼出axios的官方檔案地址：
http://www.axios-js.com/zh-cn/docs/
首先是前端部分進行設定
第一步，在vue專案中安裝axios
在vs code的終端中輸入命令 npm install axios
稍等片刻，即可完成安裝
第二步，構建axios的測驗api
首先需要在main.js中，引入前面安裝的axios
然后在某個組件的鉤子函式里，寫入以下代碼
在組件被創建的時候，向后臺發送get請求，獲取資料，如果對axios的api不太熟悉的話，可以轉到axios的官方檔案
當然我也為新手提前準備好了截圖，供查閱
上面這張圖片來自于axios的官方檔案
前端部分就此完成
接下來是配置.net core webapi專案
其實后端的配置極其簡單，只需啟用cors，然后做一些服務注入和中間件的添加即可
在微軟的檔案中也有對這部分給出了相關的注解，這里可以選擇查閱微軟的官方檔案
第一步，服務注入
在startup.cs中加入以下代碼
readonly string MyAllowSpecificOrigins = "_myAllowSpecificOrigins";
#region cors services.AddCors(options => { options.AddPolicy(MyAllowSpecificOrigins, builder => { builder.WithOrigins("http://localhost:8888") .AllowAnyHeader() .AllowAnyMethod(); }); }); #endregion
注意WithOrigins方法表示的允許跨域訪問的url，引數可以是一個陣列的形式，比如像下面這種方式去寫：
第二步，添加中間件
這里按照微軟的官方檔案，cors的中間件放置需要特別注意位置，這里面我是放在了UseRouting與UseEndPoints的中間，這個可以參照微軟的檔案，里面有注解
第三步，在控制器上打上標簽
[EnableCors(PolicyName = "_myAllowSpecificOrigins")]
到此，前后端的配置都已結束，接下來讓我們見證最終的效果
完美回應，so good
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/69038.html
標籤：.NET Core