如何将Vue.js前端与ASP.NET Core Web API后端对接？

一、后端准备工作 #

• 先确保API能独立运行
  启动后端项目后，用浏览器或Postman测试核心接口是否正常响应。比如待办清单的基础接口：

  • GET /api/todo 获取所有待办项
  • POST /api/todo 添加新待办
  • PUT /api/todo/{id} 更新待办状态
  • DELETE /api/todo/{id} 删除待办

  极简C#控制器示例：

  [ApiController]
  [Route("api/[controller]")]
  public class TodoController : ControllerBase
  {
      private static List<TodoItem> _todoList = new List<TodoItem>();
  
      [HttpGet]
      public IActionResult GetAllTodos() => Ok(_todoList);
  
      [HttpPost]
      public IActionResult AddTodo(TodoItem newTodo)
      {
          newTodo.Id = _todoList.Count + 1;
          _todoList.Add(newTodo);
          return CreatedAtAction(nameof(GetTodoById), new { id = newTodo.Id }, newTodo);
      }
  
      [HttpGet("{id}")]
      public IActionResult GetTodoById(int id)
      {
          var todo = _todoList.FirstOrDefault(t => t.Id == id);
          return todo == null ? NotFound() : Ok(todo);
      }
  
      [HttpPut("{id}")]
      public IActionResult UpdateTodo(int id, TodoItem updatedTodo)
      {
          var targetTodo = _todoList.FirstOrDefault(t => t.Id == id);
          if (targetTodo == null) return NotFound();
          targetTodo.Title = updatedTodo.Title;
          targetTodo.IsCompleted = updatedTodo.IsCompleted;
          return NoContent();
      }
  
      [HttpDelete("{id}")]
      public IActionResult DeleteTodo(int id)
      {
          var todo = _todoList.FirstOrDefault(t => t.Id == id);
          if (todo == null) return NotFound();
          _todoList.Remove(todo);
          return NoContent();
      }
  }
  
  public class TodoItem
  {
      public int Id { get; set; }
      public string Title { get; set; }
      public bool IsCompleted { get; set; }
  }
  

• 配置跨域（必须）
  前端和后端默认跑在不同端口，会触发跨域限制。在Program.cs里添加CORS配置：

  var builder = WebApplication.CreateBuilder(args);
  
  // 注册CORS服务
  builder.Services.AddCors(options =>
  {
      options.AddPolicy("AllowVueOrigin",
          policy => policy.WithOrigins("http://localhost:5173") // 改成你的Vue项目实际端口
                          .AllowAnyHeader()
                          .AllowAnyMethod());
  });
  
  builder.Services.AddControllers();
  
  var app = builder.Build();
  
  // 启用CORS，注意顺序要在UseRouting之后、UseAuthorization之前
  app.UseCors("AllowVueOrigin");
  
  app.UseAuthorization();
  
  app.MapControllers();
  
  app.Run();
  

二、前端对接实现 #

• 安装axios（Vue项目常用的HTTP库）
  在Vue项目根目录执行命令：

  npm install axios
  

• 封装API请求（推荐，方便维护）
  在src目录下新建api/todo.js，统一管理待办相关接口：

  import axios from 'axios'
  
  const api = axios.create({
    baseURL: 'http://localhost:5000/api', // 改成你的后端API地址
    headers: {
      'Content-Type': 'application/json'
    }
  })
  
  export default {
    fetchTodos() {
      return api.get('/todo')
    },
    createTodo(todo) {
      return api.post('/todo', todo)
    },
    updateTodo(id, todo) {
      return api.put(`/todo/${id}`, todo)
    },
    removeTodo(id) {
      return api.delete(`/todo/${id}`)
    }
  }
  

• 在Vue组件中调用API
  简单待办列表组件src/components/TodoList.vue示例：

  <template>
    <div class="todo-wrap">
      <h2>我的待办</h2>
      <input 
        v-model="newTodoText" 
        placeholder="输入新待办" 
        @keyup.enter="addNewTodo"
      >
      <button @click="addNewTodo">添加</button>
      <ul class="todo-list">
        <li v-for="todo in todos" :key="todo.id">
          <input 
            type="checkbox" 
            v-model="todo.isCompleted" 
            @change="updateTodoStatus(todo)"
          >
          <span :class="{ done: todo.isCompleted }">{{ todo.title }}</span>
          <button @click="deleteTodo(todo.id)">删除</button>
        </li>
      </ul>
    </div>
  </template>
  
  <script>
  import todoApi from '../api/todo'
  
  export default {
    data() {
      return {
        todos: [],
        newTodoText: ''
      }
    },
    async mounted() {
      // 页面加载时获取所有待办
      await this.loadTodos()
    },
    methods: {
      async loadTodos() {
        try {
          const res = await todoApi.fetchTodos()
          this.todos = res.data
        } catch (err) {
          console.error('加载待办失败:', err)
        }
      },
      async addNewTodo() {
        if (!this.newTodoText.trim()) return
        try {
          await todoApi.createTodo({
            title: this.newTodoText,
            isCompleted: false
          })
          this.newTodoText = ''
          await this.loadTodos()
        } catch (err) {
          console.error('添加待办失败:', err)
        }
      },
      async updateTodoStatus(todo) {
        try {
          await todoApi.updateTodo(todo.id, todo)
        } catch (err) {
          console.error('更新待办失败:', err)
          // 失败后恢复原状态
          todo.isCompleted = !todo.isCompleted
        }
      },
      async deleteTodo(id) {
        try {
          await todoApi.removeTodo(id)
          await this.loadTodos()
        } catch (err) {
          console.error('删除待办失败:', err)
        }
      }
    }
  }
  </script>
  
  <style scoped>
  .todo-wrap {
    max-width: 600px;
    margin: 2rem auto;
    padding: 0 1rem;
  }
  .todo-list li {
    margin: 1rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .done {
    text-decoration: line-through;
    color: #999;
  }
  </style>
  

三、常见问题排查 #

• 端口不匹配：检查后端启动端口和前端baseURL是否一致，ASP.NET Core默认是5000/7000，Vue3默认是5173。
• 跨域错误：确认后端CORS配置的WithOrigins是前端的正确地址，比如如果前端用了其他端口，要同步修改。
• 接口无响应：先用Postman单独测试后端接口，确认接口正常后再对接前端。

内容的提问来源于stack exchange，提问作者beginnercoder