Why am I still getting CORS issues with Apollo studio after setting the headers?

Question

I am working on a service that uses OIDC. The session ID is stored in a cookie called PAT. I can interact with the graphql service using Postman so I know the service itself is working. However, when I try to access with the studio it fails. Here is the server...

import {ApolloServer} from "apollo-server";
import config from "./graphql/index.mjs"



class EddieBrockApp {
  constructor(schema, plugin){
    this.server = new ApolloServer({
      config,
      schema,
      plugins: [plugin],
      cors: {
        origin: ["https://mysite.co", "https://studio.apollographql.com"],
        credentials: true,
      },
    });
  }
  start(){
    this.server.listen({port: 4200})
      .then(this.onStart)
  }
  onStart({url}){
    console.log("Started at ", url);
  }
}
export default EddieBrockApp

The studio shows 2 calls one to Options with a CORS failed message and one to POST that says NS_ERROR_DOM_BAD_URI

I tried to add a function to explicitly set the headers...

context: ({res}) => {
    res.header('test-header', 'my-header');
    res.header('Vary', 'Origin');
    res.header('Access-Control-Allow-Origin', 'https://studio.apollographql.com');
}

I see the headers...

But still the Apollo studio fails. I try their debug and I get...

npx [email protected] --endpoint=https://mysite.co

But I get...

⚠️  OPTIONS response returned 404. Is the url correct? Are authorization headers or cookies required?
⚠️  OPTIONS response is missing header 'access-control-allow-methods: POST'
⚠️  POST response returned 404. Is the url correct? Are authorization headers or cookies required?
⚠️  POST response missing 'access-control-allow-origin' header.

What am I doing wrong how do I avoid these CORS issues?