API endpoint with graphql endpoint says to embed sandbox on website

Help
1

I have created a GraphQL API endpoint which when run on graphiql server says to embed sandbox on website. I dont have any frontend app created, what I have is just an api which was created on Azure functions locally with apollo-server-functions and typescript as the language. I dont see any errors when starting the api in the console. Below is the simple code I wrote to test the api -

import { ApolloServer, gql } from "apollo-server-azure-functions"
    
    const typeDefs = gql`
        type Query {
            graphQlOnAzure: String!
        }
    `
    
    const resolvers = {
        Query: {
            graphQlOnAzure() {
                return "GraphQL on Azure!";
            }
        }
    }
    
    const server = new ApolloServer({ typeDefs, resolvers})
    export default server.createHandler({ cors: {
        origin: 'http://localhost:7071',
        credentials: true
} });

And this is the error I get when clicking on the api link -

image
image2068×1296 80.5 KB

I have read adding CORS to the request would fix the issue but that did not. Any help is appreciated, digging into azure functions and graphql for the first time.