当前位置：首页 > news >正文

前端Vue 后端ASP.NET Core WebApi 本地调试交互过程

news 2025/10/14 7:37:11

环境概述：

后端：Visual Studio 、 .Net 6 、 WebApi

前端：Visual Studio Code 、 Vue:"^2.6.14" 、 vue/cli-service: "^3.0.3"

第一步：启动后端服务

在Program.cs中

// Program.cs - 这是你的后端入口
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddControllers();var app = builder.Build();
app.UseRouting();
app.MapControllers();app.Run(); // ← 这里启动Kestrel服务器！

实际发生：

.NET 6 启动内置的 Kestrel Web服务器
监听 http://localhost:7000 (HTTP) 和 https://localhost:7001 (HTTPS)
你的WebAPI现在可以处理HTTP请求了

对于第二步，Properties/launchSettings.json 中可以看到类似配置，侦听端口根据配置来：

第二步：启动前端服务

在VSCode终端中运行：

npm run serve

实际发生：

Vue CLI 启动开发服务器
监听 http://localhost:8080 (也是根据配置来)
实时编译你的 .vue 文件为浏览器可执行的JS

第三步：浏览器访问

1.你在浏览器输入：http://localhost:8080

2.浏览器发送HTTP请求

3.Vue开发服务器（Vue CLI）响应,返回一个HTML文件

4.浏览器解析HTML并构建DOM树

📡 前后端交互过程详解

当Vue组件调用API时：

假设你的Vue代码中有：

// Vue组件中的方法
methods: {async loadUsers() {try {// 调用后端APIconst response = await this.$http.get('https://localhost:7000/api/users');this.users = response.data;} catch (error) {console.error('API调用失败', error);}}
}

发生了什么？

1. 请求发出阶段

浏览器(localhost:8080)  → HTTP GET请求 → Kestrel服务器(localhost:7000)

2. 后端处理阶段

你的.NET WebAPI接收到请求：

// Controllers/UsersController.cs
[ApiController]
[Route("api/[controller]")]
public class UsersController : ControllerBase
{[HttpGet]public IActionResult GetUsers(){// 这里执行你的业务逻辑var users = new[]{new { Id = 1, Name = "张三" },new { Id = 2, Name = "李四" }};// 返回JSON数据return Ok(users);}
}

3. 响应返回阶段

Kestrel返回json格式的文件：

{"data": [{ "id": 1, "name": "张三" },{ "id": 2, "name": "李四" }]
}

🛡️ 关键技术：解决跨域问题

由于前端(8080)和后端(7000)端口不同，会产生跨域限制。你的环境通过以下方式解决：

方案1：后端配置CORS

在你的.NET 6 WebAPI中：

// Program.cs
var builder = WebApplication.CreateBuilder(args);// 添加CORS服务
builder.Services.AddCors(options =>
{options.AddPolicy("VueDevServer",policy =>{policy.WithOrigins("http://localhost:8080") // 允许Vue开发服务器.AllowAnyHeader().AllowAnyMethod();});
});var app = builder.Build();// 使用CORS中间件
app.UseCors("VueDevServer");app.MapControllers();
app.Run();

这样配置后：

浏览器允许 localhost:8080 访问 localhost:7000 的API
前后端可以自由通信

方案2：Webpack Dev Server 的代理功能

配置参数参考：

devServer: {port: 6688,proxy: {'/api': {  // 匹配所有以 /api 开头的请求target: 'https://localhost:5656', // 转发目标changeOrigin: true,     // 修改请求头中的 Originsecure: false,          // 忽略SSL证书验证logLevel: 'debug',      // 输出代理日志onProxyReq(proxyReq, req, res) {  // 代理请求钩子console.log('代理请求:', req.originalUrl, '->', proxyReq.path);}}}
}

配置后工作流程：

浏览器 → http://localhost:6688/api/users↓Vue开发服务器接收请求↓代理转发 → https://localhost:5656/api/users↓.NET后端处理并返回↓代理返回给浏览器

🔧 目前开发环境特有的细节

Vue CLI服务的特性

由于你使用 vue/cli-service: "^3.0.3"：

支持热重载：修改Vue代码时页面自动更新
提供源代码映射：浏览器中可调试原始Vue代码
自动处理 ES6+ → ES5 转换

.NET 6 Kestrel的特性

跨平台：可在Windows/Linux/macOS运行
高性能：异步I/O模型
自宿主：不需要IIS即可运行

🎨 可视化整个流程

┌─────────────────────────────────────────────────┐
│               你的开发电脑                      │
│                                                 │
│  ┌─────────────┐          ┌─────────────────┐   │
│  │  浏览器     │          │ Visual Studio   │   │
│  │localhost:8080│         │ (.NET 6 WebAPI) │   │
│  └─────────────┘          └─────────────────┘   │
│         │                          │            │
│  ┌─────────────┐                   │            │
│  │ VSCode      │                   │            │
│  │ (Vue CLI)   │ ←─────────────────┘            │
│  └─────────────┘                                │
│         │                                       │
│  ┌─────────────┐          ┌─────────────────┐   │
│  │前端开发服务器│ ←────→  │ 后端Kestrel服务器│   │
│  │ :8080       │   HTTP   │ :7000           │   │
│  └─────────────┘          └─────────────────┘   │
│                                                 │
└─────────────────────────────────────────────────┘