如何修复ASP.Net Core API 5与Vue中的CORS错误

你的问题核心是浏览器发送的OPTIONS预检请求没有得到服务器的正确响应——虽然你设置了Access-Control-Allow-Origin: *，但服务器没处理好OPTIONS请求，导致它返回了非200/204的状态码，触发了CORS拦截。

解决步骤如下：

1. 确保服务器专门处理OPTIONS请求 #

浏览器发送非简单请求（比如带自定义头、POST之外的方法）前，会先发送OPTIONS预检请求确认权限。很多服务器默认不会处理这类请求，需要手动配置：

• ASP.NET Core：确保CORS中间件在管道中靠前位置，并且配置允许OPTIONS方法：

  builder.Services.AddCors(options =>
  {
      options.AddPolicy("AllowAll", policy =>
      {
          policy.AllowAnyOrigin()
                .AllowAnyMethod() // 包含OPTIONS方法
                .AllowAnyHeader();
      });
  });
  
  app.UseCors("AllowAll");
  

• Nginx：在location块中添加OPTIONS的响应配置：

  location /api/ {
      if ($request_method = OPTIONS) {
          add_header Access-Control-Allow-Origin *;
          add_header Access-Control-Allow-Methods GET, POST, OPTIONS;
          add_header Access-Control-Allow-Headers Content-Type;
          return 204; # 返回204 No Content是预检请求的标准响应
      }
      # 其他请求的配置逻辑...
  }
  

• Node.js/Express：使用cors中间件自动处理OPTIONS请求：

  const cors = require('cors');
  app.use(cors()); // 默认允许所有来源、方法和请求头
  

2. 检查预检响应的必要头信息 #

除了Access-Control-Allow-Origin，预检响应还需要包含：

• Access-Control-Allow-Methods：列出实际请求允许使用的HTTP方法（比如你的场景里的POST）
• Access-Control-Allow-Headers：如果你的请求携带自定义头（比如Content-Type、Authorization），必须在这里声明
• 注意这些头要出现在OPTIONS请求的响应里，不能只在实际业务请求的响应中返回

3. 排查拦截OPTIONS请求的中间件 #

如果服务器有权限验证、路由拦截类的中间件，要确保它们跳过OPTIONS请求——这类预检请求不需要携带身份凭证，也不需要执行业务逻辑，直接返回成功响应即可。

4. 验证预检请求的响应状态 #

用浏览器开发者工具的网络面板查看OPTIONS请求的状态码，必须是200或204。如果是404、403或500，说明服务器路由配置错误，或者内部处理OPTIONS请求时出错，需要针对性排查服务器日志定位问题。

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