.net core3.1 webapi + vue.js + axios實現跨域

我所要講述的是，基於.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