[Vuejs]-@click event doesn't work when runtimeConfig is used in Nuxt 3

by

1👍

✅

If you open your browser dev tools you’ll see errors in the console. These errors have broken the page to the point where the page is no longer reactive or usable. If you fix the errors, you fix the page.

Access to fetch at ‘https://dummyjson.com/auth/login’ from origin has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: The value of the ‘Access-Control-Allow-Origin’ header in the response must not be the wildcard ‘*’ when the request’s credentials mode is ‘include’.

dummyjson doesn’t use credentials: 'include' for its auth endpoint. Instead, perform your fetch with the options indicated by the docs

const response = await $fetch('/auth/login', {
  method: 'POST',
  baseURL: config.public.API_BASE_URL,
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    username: config.EMAIL,
    password: config.PASSWORD,
  }),
});

Fixing that, the next error that appears is a 400 error. The response being

{"message":"Invalid credentials"}

If you look at the actual request sent by the browser, it does not include username or password in it’s body. The problem now is the use of $fetch. Per the documentation (emphasis mine):

It is recommended to use $fetch when posting data to an event handler, when doing client-side only logic, or combined with useAsyncData

I point out that $fetch is for client-side only logic because your keys config.EMAIL and config.PASSWORD are not public and therefore are server-side only. When you make requests using these keys, they don’t get added to the request at all because your client side code does not have access to them. The solution is to use useFetch instead of $fetch

The useFetch and useAsyncData composables ensure that once an API call is made on the server, the data is properly forwarded to the client in the payload.

const response = await useFetch('/auth/login', {
  method: 'POST',
  baseURL: config.public.API_BASE_URL,
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    username: config.EMAIL,
    password: config.PASSWORD,
  }),
});

This is now working.

updated Stackblitz

👤yoduh

Leave a comment