Nuxt调用.NET API始终返回undefined值的问题求助

尽管Chrome开发者工具的网络面板显示API已返回正确的响应内容，但使用Nuxt的useFetch或$fetch调用后，拿到的结果始终是undefined。

相关代码 #

前端组件代码

<template>
  <div>Home page</div>
  <button @click="fetchFromApi">Fetch from api</button>
  <div>{{ test }}</div>
</template>

<script setup>
  let test = ref("Unchanged");
  let fetchFromApi = async () => {
    const { data, loading, error } = 
        await useFetch("http://localhost:5000/test", {
              method: "GET",
              mode: "no-cors"
            }
        );
    test.value = data.value;
  }
</script>

API控制器代码（ASP.NET Core）

[ApiController]
[Route("[controller]")]
public class TestController : ControllerBase
{
    public TestController()
    {
    }

    [HttpGet]
    public string Get()
    {
        return "Test succeeded!";
    }
}

调用后获取的data值

{
  dep: undefined,
  __v_isRef: true,
  __v_isShallow: false,
  _rawValue: undefined,
  _value: undefined
}

使用$fetch的测试代码

await $fetch("http://localhost:5000/test", {
              method: "GET",
              mode: "no-cors"
            }
        );

排查过程 #

曾怀疑是SSR导致的问题，关闭Nuxt配置中的SSR后问题仍未解决。

问题原因 #

问题出在请求配置中的mode: "no-cors"。当使用这个模式时，浏览器会强制限制JavaScript代码访问响应的内容——哪怕网络面板能看到完整的响应体，前端JS也无法读取到任何响应数据，最终导致data.value为undefined。

解决方案 #

1. 移除mode: "no-cors"配置：这是解决问题的核心，移除后前端才能正常访问API返回的数据。
2. 配置API的CORS策略：因为前端和API运行在不同端口（前端通常是Nuxt默认的3000，API是5000），属于跨域请求，需要在ASP.NET Core项目中配置CORS允许前端的域名访问。

修改后的useFetch调用代码：

const { data, loading, error } = 
    await useFetch("http://localhost:5000/test", {
          method: "GET"
        }
    );

ASP.NET Core配置CORS的示例（在Program.cs中添加）：

builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowNuxtApp",
        policy => policy.WithOrigins("http://localhost:3000") // 你的Nuxt前端地址
                        .AllowAnyHeader()
                        .AllowAnyMethod());
});

// 在app.UseRouting()之后添加
app.UseCors("AllowNuxtApp");

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