dotnet core webapi +vue 搭建前後端完全分離web架構(一)
摘要： 架構 服務端采用 dotnet core webapi 前端采用: Vue + router +elementUI+axios 問題 使用前後端完全分離的架構，首先遇到的問題肯定是跨域訪問。
架構
服務端采用 dotnet core webapi
前端采用: Vue + router +elementUI+axios
問題
使用前後端完全分離的架構，首先遇到的問題肯定是跨域訪問。前後端可能不在同個server上，即使前後端處在同個server上，由於前後端完全分離，
前後端使用的端口號也可能是不一樣的，所以必須解決跨域訪問。
具體實現
服務端
服務端使用的dotnetcore +webapi架構，支持cors非常簡單，只要引入Microsoft.AspNetCore.Cors 組件，所有問題就迎刃而解了。具體實現如下：
創建 wepapi項目
l Dotnet new webapi
l 引入 cors組件
dotnet add package Microsoft.AspNetCore.Cors --version 2.0.1
l 服務端目錄結構
l 添加 cors服務
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
//添加cors 服務
services.AddCors(options =>
options.AddPolicy("CorsSample",p => p.WithOrigins("http://localhost:5000")
.AllowAnyMethod().AllowAnyHeader()));
app.UseMvc();
}
設定header original
public void ConfigureServices(IServiceCollection services)
{
services.AddMvc();
//配置Cors
app.UseCors("CorsSample");
}
l 修改controller的 get 方法
namespace webApiDemo1.Controllers
{
[Route("api/[controller]")]
public class ValuesController : Controller
{
// GET api/values
[HttpGet]
[EnableCors("CorsSample")]
public IEnumerable<string> Get()
{
return new string[] { DateTime.Now.ToString() };
}
}
}
l 編譯與運行 webapi
dotnet run
至此 服務端的所有工作都已完成，測試
客戶端
目錄結構
搭建webpack 下Vue + router +elementUI
如果不清楚如何搭建 vue+router+elementUI ，請自行度娘。
引入axios 組件
npm install axios
創建單頁組件UserInfo.vue
<template>
<div class="userList">
<el-button type="primary" @click="handleClick">獲取服務端時間</el-button>
<p>call from server:{{msg}}</p>
</div>
</template>
<script>
import axios from ‘axios‘;
export default{
data(){
return {
msg:""
}
},
methods: {
handleClick(evt) {
let _self=this;
axios.get(‘http://localhost:5000/api/Values‘)
.then(function (response) {
//debugger;
console.log(response);
_self.msg=response.data;
})
.catch(function (error) {
console.log(error);
});
}
}
}
</script>
<style scoped>
.userList
{
padding-top: 10px;
}
</style>
運行效果
npm run dev
註意：response的 original ,這可是cors的關鍵所在
原文發布時間：2018-6-19
原文作者：dotNET跨平臺
本文來源掘金如需轉載請緊急聯系作者
dotnet core webapi +vue 搭建前後端完全分離web架構(一)