我所要講述的是，基于.net core3.1環(huán)境下的webapi項目，如何去使用axios對接前端的vue項目

既然談到axios，這里貼出axios的官方文檔地址：

http://www./zh-cn/docs/

首先是前端部分進行設(shè)置

第一步，在vue項目中安裝axios

 在vs code的終端中輸入命令 npm install axios

稍等片刻，即可完成安裝

第二步，構(gòu)建axios的測試api

首先需要在main.js中，引入前面安裝的axios

然后在某個組件的鉤子函數(shù)里，寫入以下代碼

在組件被創(chuàng)建的時候，向后臺發(fā)送get請求，獲取數(shù)據(jù)。如果對axios的api不太熟悉的話，可以轉(zhuǎn)到axios的官方文檔

當然我也為新手提前準備好了截圖，供查閱

 上面這張圖片來自于axios的官方文檔

前端部分就此完成

接下來是配置.net core webapi項目

其實后端的配置極其簡單，只需啟用cors，然后做一些服務(wù)注入和中間件的添加即可

在微軟的文檔中也有對這部分給出了相關(guān)的注解，這里可以選擇查閱微軟的官方文檔

第一步，服務(wù)注入

在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，參數(shù)可以是一個數(shù)組的形式，比如像下面這種方式去寫：

 第二步，添加中間件

 這里按照微軟的官方文檔，cors的中間件放置需要特別注意位置，這里面我是放在了UseRouting與UseEndPoints的中間，這個可以參照微軟的文檔，里面有注解

第三步，在控制器上打上標簽

  [EnableCors(PolicyName = "_myAllowSpecificOrigins")]

到此，前后端的配置都已結(jié)束，接下來讓我們見證最終的效果

 完美響應(yīng)，so good