.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