Vue3调用Asp.Net API 6.0遇CORS错误（状态码200）求助

问题现象 #

生产域名环境中，Vue3前端调用ASP.NET API 6.0的认证接口获取Token时，接口返回状态码200，但浏览器触发CORS跨域错误。已在Nginx中配置CORS相关设置，但问题未解决。

错误截图 #

相关配置与代码 #

Nginx Web API配置 #

server {
    listen        80;
    server_name   api.MYDOMAIN.com www.api.MYDOMAIN.com;
    listen 443 ssl; # managed by Certbot

    # RSA certificate
    ssl_certificate /etc/letsencrypt/live/api.MYDOMAIN.com/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/api.MYDOMAIN.com/privkey.pem; # managed by Certbot

    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot

    # Redirect non-https traffic to https
    if ($scheme != "https") {
        return 301 https://$host$request_uri;
    } # managed by Certbot

    location / {
        proxy_pass         http://127.0.0.1:5000;
        proxy_http_version 1.1;
        proxy_set_header   Upgrade $http_upgrade;
        proxy_set_header   Connection keep-alive;
        proxy_set_header   Host $host;
        proxy_cache_bypass $http_upgrade;
        proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header   X-Forwarded-Proto $scheme;
    }
}

Nginx UI服务配置 #

server {

    listen 80;
    listen 443 ssl;
    server_name pro.MYDOMAIN.com www.pro.MYDOMAIN.com;

    if ($scheme != "https") {
        return 301 https://$host$request_uri;
    } # managed by Certbot

        # RSA certificate
    ssl_certificate /etc/letsencrypt/live/pro.MYDOMAIN.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/pro.MYDOMAIN.com/privkey.pem;

    include /etc/letsencrypt/options-ssl-nginx.conf;

    # autoindex on;
    root /var/www/html/pro.MYDOMAIN.com/dist;
    index index.html;

    location / {
    try_files $uri $uri/ /index.html;
    }
}

Asp.Net Web Api配置截图 #

Vue3中API调用代码 #

const response = await axios
  .post(
    `${API_URL}/Auth/Authenticate`,
    formData,
    { withCredentials: true },
    {
      headers: {
        "Content-Type": "multipart/form-data",
        "user-agent": "My Pro",
        // "Access-Control-Allow-Origin": true,
        // "Access-Control-Allow-Credentials": true,
      },
    }
  )
  .then((response) => {
    console.log('response in the then')
    console.log(response)
    return response
  })
  .catch((error) => {
    console.error(error);
    this.isLoggedIn = false;
    this.loginUnSuccessful = true;
  });

问题分析与解决步骤 #

1. 补全Nginx API的CORS配置 #

当前Nginx API配置中完全缺失CORS响应头配置，这是核心问题。浏览器会强制校验跨域请求的响应头，即使接口返回200，缺失关键头也会触发错误。需在API的location /块中添加以下配置：

location / {
    # 保留原有代理配置
    proxy_pass         http://127.0.0.1:5000;
    proxy_http_version 1.1;
    proxy_set_header   Upgrade $http_upgrade;
    proxy_set_header   Connection keep-alive;
    proxy_set_header   Host $host;
    proxy_cache_bypass $http_upgrade;
    proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header   X-Forwarded-Proto $scheme;

    # 添加CORS核心配置
    add_header Access-Control-Allow-Origin "https://pro.MYDOMAIN.com" always;
    add_header Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS" always;
    add_header Access-Control-Allow-Headers "Content-Type, Authorization, user-agent" always;
    add_header Access-Control-Allow-Credentials "true" always;

    # 处理OPTIONS预检请求
    if ($request_method = OPTIONS) {
        return 204;
    }
}

• always参数必须添加：确保后端返回任何状态码时，CORS头都会被携带；
• Access-Control-Allow-Origin必须指定明确的前端域名，不能用*（因为启用了withCredentials: true）。

2. 修正ASP.NET Core的CORS配置 #

从截图看，当前CORS策略只允许开发环境的http://localhost:5173，需替换为生产前端域名，并确保启用凭证支持：

// Program.cs中配置CORS
builder.Services.AddCors(options =>
{
    options.AddPolicy("ProductionCors", policy =>
    {
        policy.WithOrigins("https://pro.MYDOMAIN.com")
              .AllowAnyHeader()
              .AllowAnyMethod()
              .AllowCredentials();
    });
});

// 启用CORS中间件（需放在UseRouting之后，UseAuthorization之前）
app.UseCors("ProductionCors");

3. 修复Axios请求参数错误 #

你的Axios调用参数顺序错误，withCredentials应放在第三个配置对象内，而非单独作为参数。同时前端不需要添加Access-Control-Allow-Origin这类服务端响应头：

const response = await axios
  .post(
    `${API_URL}/Auth/Authenticate`,
    formData,
    {
      withCredentials: true,
      headers: {
        "Content-Type": "multipart/form-data",
        "user-agent": "My Pro"
      }
    }
  )
  .then((response) => {
    console.log('response in the then')
    console.log(response)
    return response
  })
  .catch((error) => {
    console.error(error);
    this.isLoggedIn = false;
    this.loginUnSuccessful = true;
  });

4. 重启服务验证 #

修改配置后，重启相关服务：

• 重启Nginx：sudo systemctl restart nginx
• 重启ASP.NET Core API服务（根据你的部署方式执行对应重启命令）

之后用浏览器开发者工具的Network面板，查看认证接口的响应头，确认包含Access-Control-Allow-Origin、Access-Control-Allow-Credentials等关键头信息。

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