Unable to verify SSL certificate with headless setup

[superma312]

Description I setup fresh magento 2.4.3 locally. And I tried to run vue storefront project using local magento api, https://magento.test , but I got fetch error as below.

request to https://magento.test/graphql?query=query%20storeConfig%20%7B%20storeConfig%20%7B%20store_code%20default_title%20store_name%20default_display_currency_code%20locale%20header_logo_src%20logo_width%20logo_height%20logo_alt%20%7D%20%7D&operationName=storeConfig failed, reason: unable to verify the first certificate

Steps To Reproduce

1. Install a fresh magento locally using curl -s https://raw.githubusercontent.com/markshust/docker-magento/master/lib/onelinesetup | bash -s -- magento.test 2.4.3
2. Install vue storefront locally from https://github.com/vuestorefront/vue-storefront
3. Create .env in vue storefront project

   
   VSF_NUXT_APP_ENV=development
   VSF_NUXT_APP_PORT=3000

VSF_STORE_URL=http://localhost:3000

VSF_MAGENTO_BASE_URL=magento.test VSF_MAGENTO_GRAPHQL_URL=https://magento.test/graphql

VSF_MAGENTO_EXTERNAL_CHECKOUT_ENABLED=false VSF_MAGENTO_EXTERNAL_CHECKOUT_URL=https://magento.test VSF_MAGENTO_EXTERNAL_CHECKOUT_SYNC_PATH=/vue/cart/sync

VSF_IMAGE_PROVIDER=cloudinary VSF_IMAGE_PROVIDER_BASE_URL=https://res-4.cloudinary.com/{YOUR_ID}/image/upload/ VSF_IMAGE_PROVIDER_DOMAIN=https://res-4.cloudinary.com

VSF_REDIS_ENABLED=false VSF_REDIS_HOST=127.0.0.1 VSF_REDIS_PORT=6379 VSF_REDIS_KEY_PREFIX= VSF_REDIS_CACHE_INVALIDATE_URL=/cache-invalidate

VSF_RECAPTCHA_ENABLED=false VSF_RECAPTCHA_SITE_KEY= VSF_RECAPTCHA_SECRET_KEY= VSF_RECAPTCHA_HIDE_BADGE= VSF_RECAPTCHA_SIZE=invisible VSF_RECAPTCHA_MIN_SCORE=0.5 VSF_RECAPTCHA_VERSION=3

When running vue storefront project using `npm run dev`, I got an error
**Expected Result**
The vue storefront UI should appear without any error.

**Actual Result**

FetchError request to https://magento.test/graphql?query=query%20storeConfig%20%7B%20storeConfig%20%7B%20store_code%20default_title%20store_name%20default_display_currency_code%20locale%20header_logo_src%20logo_width%20logo_height%20logo_alt%20%7D%20%7D&operationName=storeConfig failed, reason: unable to verify the first certificate

![image](https://user-images.githubusercontent.com/29485826/174344085-031cbd36-29c3-4ae0-b974-4dc8915de9a5.png)

[khako]

Any news on this issue ? I get the same error with Magento 2.4.5 and VSF 2.

[Trajko00]

bump

[6ui11em]

Same problem trying to use Graphcommerce.

[josealvarez97]

Same problem trying to call the API

[josealvarez97]

@markshust Do you have any advice? Thank you.

[markshust]

@josealvarez97 I haven't run M2 with VueStorefront or any other headless solution yet, so I'm really not sure.

If someone has a suggested fix for this, I'd gladly take it in.

[ducdc91]

Has anyone been able to fix it?

[alidindin]

Runs pretty good with 2.4.6 and 2.4.7.

VSF_NUXT_APP_ENV=development VSF_NUXT_APP_PORT=3000 VSF_NUXT_APP_HOST=localhost

VSF_STORE_URL=http://localhost:3000

//# Previously VSF_MIDDLEWARE_URL API_BASE_URL=http://localhost:3000/api/ //# Previously VSF_SSR_MIDDLEWARE_URL API_SSR_BASE_URL=http://localhost:3000/api/

VSF_MAGENTO_BASE_URL=https://magento.dev/ VSF_MAGENTO_GRAPHQL_URL=https://magento.dev/graphql

VSF_MAGENTO_EXTERNAL_CHECKOUT_ENABLED=false VSF_MAGENTO_EXTERNAL_CHECKOUT_URL=https://magento.dev/ VSF_MAGENTO_EXTERNAL_CHECKOUT_SYNC_PATH=/vue/cart/sync

They recommend to use yarn instead of npm. Would setup VSF2 with yarn again and use yarn dev. Do you configure Nuxt for Static Mode ? Keep in mind that VSF2 only works in SSR Mode and correct middleware config is necessary. You have to set API_BASE_URL and API_SSR_BASE_URL env variables.