Angular使用Apollo Client连接Hasura时遇无效URL错误求助

核心问题：占位符URL未替换 #

你代码中的uri变量使用了占位符http://***/v1/graphql，这是导致"Invalid URL"错误的直接原因，必须替换为Hasura项目的实际GraphQL端点。

修复方法 #

1. 登录Hasura云控制台，找到目标项目
2. 复制项目的GraphQL API端点（格式通常为https://<your-project-name>.hasura.app/v1/graphql）
3. 替换graphql.module.ts中的uri：

export const uri = 'https://your-actual-hasura-project.hasura.app/v1/graphql';

额外检查项 #

1. 确认URL格式正确性 #

• Hasura云服务默认使用HTTPS，不要用HTTP，否则会触发安全限制或请求失败
• 检查URL是否存在拼写错误、多余斜杠或缺失路径（必须包含/v1/graphql）
• 直接在浏览器中访问该URL，若能打开Hasura GraphQL Playground，说明URL有效

2. 验证CORS配置 #

虽然你设置了CORS为*，需确保配置方式正确：

• 在Hasura项目的环境变量中，添加或修改HASURA_GRAPHQL_CORS_DOMAIN，值设为*（开发环境）或具体本地地址（如http://localhost:4200）
• 保存环境变量后，重启Hasura实例使配置生效

3. 确认Hasura权限配置 #

确保Hasura中对应的角色（比如匿名角色）拥有role表的查询权限：

1. 进入Hasura控制台的Data标签，选择role表
2. 切换到Permissions选项卡，检查目标角色的Select权限是否开启
3. 先在Hasura Playground中执行getRole查询，确认能正常返回数据

4. 调试请求初始化 #

在createApollo函数中添加日志，确认URL是否正确加载：

export function createApollo(httpLink: HttpLink): ApolloClientOptions<any> {
    console.log('当前使用的Hasura URL:', uri); // 控制台打印URL，确认是否正确
    return {
        link: httpLink.create({ uri }),
        cache: new InMemoryCache(),
    };
}

验证请求 #

修复后重新启动Angular应用，执行查询代码：

this._getRoles.watch().valueChanges.subscribe((res: any) => {
    console.log('查询结果:', res);
})

此时在浏览器开发者工具的Network标签中，应该能看到指向Hasura URL的XHR请求，且返回正常数据。

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