Nuxt通过Axios调用本地.NET WebAPI出现CORS跨域错误无法请求

核心问题原因 #

1. 发送请求时使用了完整的后端绝对路径，导致Nuxt代理规则完全未生效，浏览器直接发起跨域请求
2. nuxt.config.js存在配置错误：baseURL大小写错误、重复配置、代理规则逻辑矛盾，最终导致请求路径拼接出重复的/api前缀（错误提示里的/api/api/usuarios/login就是拼接错误导致的）
3. .NET侧CORS配置未正确生效，仅添加services.Cors()不足以开启CORS，还需要正确配置策略和中间件顺序

解决步骤 #

步骤1：修改请求代码，删除绝对路径

const data= await this.$axios.$post(
        '/usuarios/login',
        loginObject
      )

步骤2：修正nuxt.config.js配置

publicRuntimeConfig: {
    axios: {
      baseURL: process.env.NODE_ENV === 'production' ? '你的生产环境API地址' : '/api'
    }
},

axios: {
  proxy: true,
  proxyHeaders: false,
  credentials: false
},

proxy: {
  '/api/': { 
    target: 'https://localhost:44309', 
    pathRewrite: { '^/api/': '/api/' }, 
    changeOrigin: true,
    // 本地自签名HTTPS证书无需校验
    secure: false
  }
}

步骤3：修正.NET WebAPI CORS配置

以.NET 6+为例，先在服务注册阶段添加完整CORS策略：

builder.Services.AddCors(options =>
{
    options.AddPolicy("DevAllow", policy =>
    {
        policy.WithOrigins("http://localhost:3000")
              .AllowAnyHeader()
              .AllowAnyMethod();
    });
});

再在中间件管道中添加CORS中间件，必须放在UseRouting之后、UseAuthorization之前：

app.UseRouting();
// 此处添加CORS中间件
app.UseCors("DevAllow");
app.UseAuthorization();

最终操作 #

修改完成后同时重启Nuxt开发服务和.NET后端服务即可生效。

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