Vue3与.NET Core Web API本地测试时的CORS请求问题排查

核心错误：mode: 'no-cors' 导致响应被屏蔽 #

你在fetch请求中设置了mode: 'no-cors'，这是当前问题的根源。该模式属于浏览器受限模式，会强制屏蔽所有响应内容，无论后端CORS配置如何，前端都只能得到type: opaque的空响应，无法读取任何数据。同时fetch参数中不存在crossorigin属性，这个配置是无效的。

修复前端请求代码 #

移除mode: 'no-cors'和无效的crossorigin配置，修改后的代码如下：

fetch('https://localhost:7209/MapData/BaseTest', {
    method: 'POST',
    headers: {
        "Content-Type": "application/json",
        "x-access-token": "token-value",
    },
})
.then(response => {
    if (!response.ok) {
        throw new Error('请求状态异常');
    }
    return response.text(); // 对应后端返回的字符串
})
.then(data => alert(data))
.catch(err => console.error('请求失败:', err));

后端CORS配置的正确姿势 #

确保ASP.NET Core项目中CORS中间件的配置顺序和策略正确：

1. 在Program.cs中添加CORS服务并定义策略：

var builder = WebApplication.CreateBuilder(args);

// 配置CORS策略
builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowVueOrigin", policy =>
    {
        // 替换为你的Vue项目实际运行地址（比如http://localhost:5173）
        policy.WithOrigins("http://localhost:5173")
              .AllowAnyMethod()
              .AllowAnyHeader();
    });
});

builder.Services.AddControllers();

var app = builder.Build();

// 注意中间件顺序：UseCors必须放在UseRouting之后、UseAuthorization之前
app.UseRouting();

// 启用CORS策略
app.UseCors("AllowVueOrigin");

app.UseAuthorization();

app.MapControllers();

app.Run();

2. 无需在接口上额外添加[EnableCors]特性（除非需要不同接口用不同策略），全局启用策略即可。

后续排查要点 #

• 核对前端项目的实际运行地址（协议、域名、端口），确保后端CORS策略中的WithOrigins完全匹配，不能有拼写错误
• 打开浏览器开发者工具的Network面板，查看请求的Response Headers，确认是否存在Access-Control-Allow-Origin字段，验证CORS是否生效
• 检查是否触发了OPTIONS预检请求，若预检请求失败，需确认后端CORS策略是否允许对应的请求方法和头
• 核对前端请求URL与后端接口路由是否完全匹配，避免路由错误导致404
• 查看浏览器控制台的错误信息，根据具体的CORS报错调整配置（比如提示缺少某个允许的请求头，就需要在策略中添加AllowHeaders）

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