前后端使用的端口号也可能是不一样的

处事端给与 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 ConfigureServices(IServiceCollection services) { services.AddMvc(); //添加cors 处事 services.AddCors(); }

l  设定header original

public void Configure(IApplicationBuilder app, IHostingEnvironment env) { if (env.IsDevelopment()) { app.UseDeveloperExceptionPage(); } //设定header original app.UseCors(builder => builder.WithOrigins(":8081") ); app.UseMvc(); }

l  改削controller的 get 要领

namespace webApiDemo1.Controllers { [Route("api/[controller]")] public class ValuesController : Controller { // GET api/values [HttpGet] 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(‘: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的关键地址