I hate CORS, please help 🙇🏻‍♂️

[BSBjorn]

I'm sorry, but I'm really bad with CORS... Just never really understand how to work with it.

I have a local dev environment (localhost:3000) where I try to do a graphql mutation for an external API. I set some header for authentication like this:

runtimeConfig: {
    public: {
      "graphql-client": {
        clients: {
          default: {
            host: process.env.GQL_HOST,
          },
          search: {
            host: "https://api.crystallize.com/hageland-dev/search",
          },
          orders: {
            host: "https://api.crystallize.com/hageland-dev/orders",
            headers: {
              "X-Crystallize-Access-Token-Id":
                process.env.CRYSTALLIZE_ACCESS_TOKEN_ID,
              "X-Crystallize-Access-Token-Secret":
                process.env.CRYSTALLIZE_ACCESS_TOKEN_SECRET,
            },
          },
        },
      },
    },
  }

But when I try to query it, this is the respons I get...

I'm calling the API like this:

async function submitOrder() {
  useGqlCors({ credentials: "same-origin" });
  //useGqlCors({ credentials: "Access-Control-Allow-Origin" });
  const { createOrder } = await GqlCreateOrder();
  console.log(createOrder);
}

I understand this is probably my own fault and lack of understanding, but I just want to learn how to work with this...
Thanks in advance for any help! <3

[Diizzayy]

@BSBjorn Given that your api is hosted on an external domain and that it does infact allow for requests from localhost:3000, you have to use the include credentials as opposed to same-origin.

useGqlCors({ credentials: 'include' })

[BSBjorn]

Yeah, you where right, the problem was that the headers where not set appropriately, I added a plugin to the browser that modifies the header, and now I get to create mutations on the API. I can now see that the headers are added correctly

Allthough my problem is initially solved, I feel that this is some workaround that is not fit for production, and I'm not sure why the headers where not set in the first place, as they are defined in nuxt.config.ts ?

orders: {
            host: "https://api.crystallize.com/hageland-dev/orders",
            headers: {
              "X-Crystallize-Access-Token-Id":
                process.env.CRYSTALLIZE_ACCESS_TOKEN_ID,
              "X-Crystallize-Access-Token-Secret":
                process.env.CRYSTALLIZE_ACCESS_TOKEN_SECRET,
            },
          },

Would love to have you help me understand this, I'll reach out on Discord tomorrow.

[michael-mb]

Same issue CrystallizeAPI/boilerplates#228

[michael-mb]

@BSBjorn Which plugin did you use please ?

[Diizzayy]

@michael-mb Would you be willing to allow me to use your repo to further debug and resolve this issue?

[michael-mb]

Yes yes it would help me a lot