Nuxt中useAsyncQuery无法调用本地localhost API？求问题排查

以下是你代码和配置中可能存在的问题及修复方案：

1. useAsyncQuery的客户端参数传递错误 #

你直接将客户端名称"other"作为第三个参数传入useAsyncQuery，这不符合@nuxtjs/apollo的API规范。该方法的第三个参数应为配置对象，需通过client字段指定客户端名称。

修复后的代码：

const { data2 } = await useAsyncQuery(query2, { id: 41 }, { client: "other" });

2. 本地API协议不匹配 #

你的配置中other客户端使用了https://localhost:5001/api/data，但本地开发环境的API通常默认使用http协议（除非你手动配置了SSL证书）。Postman可以正常调用http接口，但Nuxt在浏览器端使用https请求会因证书无效导致失败。

修改Nuxt配置中的协议：

export default defineNuxtConfig({
    modules: ['@nuxtjs/apollo'],
    apollo: {
        clients: {
          default: {
            httpEndpoint: 'https://main--spacex-l4uc6p.apollographos.net/graphql'
          },
          other: {
            httpEndpoint: 'http://localhost:5001/api/data' // 改为http协议
          },
        },
      },
})

3. 浏览器CORS跨域限制 #

Postman不受浏览器的CORS策略约束，但Nuxt在浏览器端发起请求时会触发跨域检查。如果你的本地API后端未配置允许跨域的响应头，请求会被浏览器拦截。

需要在本地API后端添加CORS相关响应头，例如：

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: Content-Type, Authorization

4. 验证GraphQL端点路径正确性 #

确认本地API的/api/data路径与Postman测试的完全一致，避免拼写错误。可以打开浏览器开发者工具的网络面板，查看请求的状态码（如404、500）和错误信息，进一步定位问题。

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