ASP.NET Core 6 Web API与独立Vue应用通信为何需UseSpa？

这段代码的具体作用 #

• app.UseSpa()是ASP.NET Core的SPA中间件，核心功能是捕获所有未被前面路由/中间件匹配的HTTP请求，并将其转发到指定的SPA开发服务器，或者返回SPA的静态文件。你设置的spa.Options.SourcePath = "."指定了SPA项目的根目录为当前应用目录。
• spa.UseVueCli(npmScript: "serve")会触发ASP.NET Core在启动时自动启动Node.js进程，执行Vue CLI的npm run serve命令——也就是启动Vue的开发服务器。同时，ASP.NET Core会作为反向代理，将前端相关的请求（比如静态资源、路由跳转请求）转发到这个Vue开发服务器上，而API请求则由ASP.NET Core自身的路由处理。

为什么删除这段代码后API与Vue无法通信 #

你遇到的情况本质是跨域问题：

• 当你保留这段代码时，所有前端请求（包括API调用）都会先发送到ASP.NET Core的端口。ASP.NET Core会把API请求交给自己的控制器处理，把前端资源请求转发到Vue开发服务器。此时浏览器认为所有请求都来自同一个域名/端口，不存在跨域限制，所以通信正常。
• 当你删除这段代码后，Vue应用单独运行在IIS（或开发服务器），API运行在ASP.NET Core的独立端口，两者属于不同的源。浏览器的同源策略会阻止Vue向API发起跨域请求，导致通信失败。

解决方法（无需保留这段代码的方案） #

1. 在ASP.NET Core中配置CORS：
   在Program.cs中添加CORS中间件，允许Vue应用的源访问API：

   builder.Services.AddCors(options =>
   {
       options.AddPolicy("AllowVueApp",
           policy => policy.WithOrigins("http://your-vue-app-domain") // 替换为你的Vue应用地址
                           .AllowAnyHeader()
                           .AllowAnyMethod());
   });
   
   // 在UseRouting之后，UseAuthorization之前启用CORS
   app.UseCors("AllowVueApp");
   

2. 确保Vue应用的API请求地址正确：
   在Vue项目中，将API请求的base URL配置为ASP.NET Core的地址（比如http://your-api-domain/api），或者在vue.config.js中配置代理转发（仅开发环境适用）：

   module.exports = {
       devServer: {
           proxy: {
               '/api': {
                   target: 'http://your-api-domain',
                   changeOrigin: true
               }
           }
       }
   }
   

补充说明 #

ASP.NET Core SPA中间件的设计初衷是将SPA与API一同托管的场景（比如部署时将Vue打包后的静态文件放在ASP.NET Core的wwwroot目录下）。你当前的前后端分离部署场景下，这段代码属于冗余配置，只是它恰好帮你规避了跨域问题，才显得“必须保留”。

内容的提问来源于stack exchange，提问作者Eric Brown - Cal