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

环境概述：

后端：Visual Studio 、 .Net 6 、 WebApi

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

第一步：启动后端服务

在Program.cs中

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代码中有：

javascript 复制代码

// Vue组件中的方法
methods: {
  async loadUsers() {
    try {
      // 调用后端API
      const 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接收到请求：

cs 复制代码

// 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中：

cs 复制代码

// 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,     // 修改请求头中的 Origin
      secure: 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           │   │
│  └─────────────┘          └─────────────────┘   │
│                                                 │
└─────────────────────────────────────────────────┘

💡 总结

在你的环境中：

两个真正的服务器：Vue CLI开发服务器 + .NET 6 Kestrel服务器
本地网络通信：通过localhost环回地址在内部通信
跨域解决方案：.NET CORS配置允许Vue应用访问API
无魔法：这是标准的HTTP请求/响应，只是发生在你的电脑内部

这就是为什么你不需要"部署"也能前后端交互------你的开发机本身就是一个完整的全栈运行环境！