Vue与.NET应用登录报错：连接拒绝及CORS问题排查

为什么改端口会触发CORS错误？ #

你把API_URL改成http://localhost:8080/后，前端其实是在向Vue开发服务器发请求，而非.NET后端：

• Vue开发服务器仅负责托管前端页面，根本不存在/user/authenticate这类API接口。
• 浏览器的同源策略要求跨域请求必须得到目标服务器的CORS头许可，但Vue服务器不会为不存在的接口返回CORS头，因此触发“CORS headers are not present”错误。

一步步解决问题 #

首先：让.NET后端正常运行 #

最初的ERR_CONNECTION_REFUSED错误说明后端未在50463端口启动，先解决这个核心问题：

1. 打开.NET项目，查看Properties目录下的launchSettings.json文件，确认后端实际使用的端口。如果不是50463，就把axios.service.js里的API_URL改成这个正确端口。
2. 启动后端服务：在Visual Studio点击启动按钮，或在项目目录执行dotnet run命令，确保服务能正常运行。可以用浏览器访问http://localhost:你的后端端口/user/authenticate——哪怕返回404也没关系，只要不出现连接拒绝提示即可。

然后：给.NET后端配置CORS #

前端运行在8080，后端在另一个端口，属于跨域请求，必须让后端明确允许来自8080的请求：

1. 打开.NET项目的Program.cs文件，添加CORS服务配置：

   var builder = WebApplication.CreateBuilder(args);
   
   // 定义允许前端跨域的规则
   builder.Services.AddCors(options =>
   {
       options.AddPolicy("AllowVueFrontend", policy =>
       {
           policy.WithOrigins("http://localhost:8080")
                 .AllowAnyHeader()
                 .AllowAnyMethod();
       });
   });
   
   builder.Services.AddControllers(); // 确保已添加Controllers服务
   

2. 启用CORS中间件（注意顺序，必须放在UseRouting之后、UseAuthorization之前）：

   var app = builder.Build();
   
   app.UseCors("AllowVueFrontend"); // 启用刚才定义的CORS规则
   
   app.UseAuthorization();
   
   app.MapControllers();
   
   app.Run();
   

3. 重启.NET后端服务，使配置生效。

最后：恢复正确的API_URL配置 #

把axios.service.js里的API_URL改回后端的实际端口（比如原来的50463，如果后端确实使用该端口）：

const API_URL = 'http://localhost:50463/';

可选方案：用Vue代理转发请求 #

如果不想在后端配置CORS，也可以让Vue开发服务器帮你转发请求：

1. 在Vue项目根目录新建vue.config.js文件，添加代理配置：

   module.exports = {
       devServer: {
           proxy: {
               '/api': {
                   target: 'http://localhost:50463', // 后端服务地址
                   changeOrigin: true,
                   pathRewrite: { '^/api': '' } // 去掉请求中的/api前缀，转发给后端
               }
           }
       }
   };
   

2. 修改axios.service.js的API_URL为相对路径：

   const API_URL = '/api/';
   

3. 重启Vue开发服务器，此时前端的请求会被自动转发到后端，避免跨域问题。

验证 #

完成上述步骤后：

• 启动.NET后端服务。
• 启动Vue前端服务（执行npm run serve）。
• 点击登录按钮，检查控制台是否还有错误，同时确认请求是否成功发送到后端。

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