ASP.NET Core集成Vue.js 2开发环境代理请求失败问题

问题描述 #

开发环境运行ASP.NET Core集成Vue.js 2的项目时，出现以下异常：

执行请求时发生未处理的异常。
System.Net.Http.HttpRequestException: 无法将请求代理到http://127.0.0.1:8080/，因为对代理目标的请求失败。请检查代理目标服务器是否正在运行并接受http://127.0.0.1:8080/的请求

排查与解决方案 #

1. 确认Vue开发服务器是否正常启动 #

• 进入项目的ClientApp目录，手动执行npm run serve，观察终端输出是否有编译错误，同时尝试直接访问http://localhost:8080：
  • 如果无法访问，先解决Vue项目本身的编译问题（比如修改模块后引入的语法错误、依赖缺失）
  • 如果能正常访问，再继续排查代理配置

2. 统一端口与地址配置 #

• 在vue.config.js中明确指定开发服务器端口，避免端口自动变更：

  devServer: {
      host: 'localhost',
      port: 8080, // 明确指定端口
      proxy: 'mydomain'
  }
  

• 确保ASP.NET Core的代理地址与Vue配置完全一致，不要混用localhost和127.0.0.1：

  app.UseSpa(spa =>
  {
      spa.Options.SourcePath = env.IsDevelopment() ? "ClientApp" : "ClientApp/dist";
      if (env.IsDevelopment())
      {
          spa.UseProxyToSpaDevelopmentServer("http://localhost:8080"); // 和Vue配置保持一致
      } 
  });
  

3. 排查Vue代理配置冲突 #

• 当前vue.config.js中devServer.proxy设置为mydomain，可能与ASP.NET Core的API路由产生代理冲突：
  • 暂时注释该配置，测试项目是否能正常运行：

    devServer: {
        host: 'localhost',
        port: 8080
        // proxy: 'mydomain' // 先注释，验证是否冲突
    }
    

  • 如果注释后恢复正常，说明需要调整代理逻辑：仅让Vue代理特定前缀的API请求（比如/api），而非全局代理：

    devServer: {
        host: 'localhost',
        port: 8080,
        proxy: {
            '/api': {
                target: 'mydomain',
                changeOrigin: true
            }
        }
    }
    

4. 清理缓存与重启服务 #

• 清理Vue项目依赖与缓存：

  # Windows
  rd /s /q ClientApp\node_modules
  rd /s /q ClientApp\dist
  cd ClientApp && npm install
  
  # Linux/macOS
  rm -rf ClientApp/node_modules ClientApp/dist
  cd ClientApp && npm install
  

• 清理ASP.NET Core项目缓存：删除项目根目录下的bin和obj文件夹，重新生成项目
• 重启IDE与终端，避免进程残留导致端口占用

5. 检查端口占用情况 #

• 验证8080端口是否被其他进程占用：

  # Windows
  netstat -ano | findstr :8080
  
  # Linux/macOS
  lsof -i :8080
  

• 如果端口被占用，杀死对应进程或修改Vue的devServer端口（比如改为8081）

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