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

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

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

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

第一步,，在vue項(xiàng)目中安裝axios

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

稍等片刻,，即可完成安裝

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

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

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

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

當(dāng)然我也為新手提前準(zhǔn)備好了截圖,，供查閱

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

前端部分就此完成

接下來是配置.net core webapi項(xiàng)目

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

在微軟的文檔中也有對(duì)這部分給出了相關(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ù)可以是一個(gè)數(shù)組的形式,，比如像下面這種方式去寫：

 第二步,，添加中間件

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

第三步,，在控制器上打上標(biāo)簽

  [EnableCors(PolicyName = "_myAllowSpecificOrigins")]

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

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