medusa: First install, storefront network error

Hello,

i did a fresh installation, follow the instruction, all good, no error. First launch storefront using nextjs, and shows following error.

`Unhandled Runtime Error

Error: Network Error Call Stack createError node_modules/axios/lib/core/createError.js (16:0) handleError node_modules/axios/lib/adapters/xhr.js (99:0)`

The attached screenshot shows as below. How could i fix the issue? Thank you.

https://ibb.co/X4DKmvV

About this issue

  • Original URL
  • State: closed
  • Created 3 years ago
  • Reactions: 4
  • Comments: 23 (5 by maintainers)

Commits related to this issue

Most upvoted comments

I’d already tried that. Here’s my medusa-config.js.

// CORS to avoid issues when consuming Medusa from a client
const STORE_CORS = process.env.STORE_CORS || "http://localhost:3000";

Yesterday I updated medusa npm package to the dev version, used example storefront, and I still get the same error. Does anyone know a solution for this problem?

Hi @blackyzero,

It is difficult to say without seeing what request is causing the error, you can see this in networks tab in your browsers developer tools. A guess would be that the error is due to a CORS error. It appears as you are running the Next.js starter on 10.0.0.38:8000 but the CORS variable const STORE_CORS is set to localhost:8000 in medusa-config.js try changing that value and see if that solves the problem 😃

I want to share here my solution to the error below as I see it is mentioned here in some comments.

Access to XMLHttpRequest at ‘http://localhost:9000/store/products’ from origin ‘http://localhost:3000’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

STORE_CORS variable is initially set to process.env.STORE_CORS || "http://localhost:3000" which means it will take the value from env variable if that exists and is true, so instead what I did, I just changed STORE_CORS to “localhost:3000”(which is the client from where I make requests to the server).

By the way, in medusa-config.js it is pretty clear commented, but I somehow didn’t payed attention initially.

So, in your backend, in medusa-config.js file:

// CORS to avoid issues when consuming Medusa from a client
const STORE_CORS = process.env.STORE_CORS || "http://localhost:8000"; 

change STORE_CORS to your client localhost. In my case it was 3000.

// CORS to avoid issues when consuming Medusa from a client
const STORE_CORS = "http://localhost:3000"; 

Hope that helps!

I’m running an application in a Docker container based on the repository https://github.com/medusajs/docker-medusa. I’ve encountered an unhandled runtime error with the following call stack:

image

1 of 1 unhandled error

Unhandled Runtime Error
Error: Request failed with status code 400

Call Stack
createError
node_modules/@medusajs/medusa-js/node_modules/axios/lib/core/createError.js (16:0)
settle
node_modules/@medusajs/medusa-js/node_modules/axios/lib/core/settle.js (17:0)
XMLHttpRequest.onloadend
node_modules/@medusajs/medusa-js/node_modules/axios/lib/adapters/xhr.js (66:0)

Docker Compose

 storefront:
    container_name: medusa-front-store
    build:
      context: ./storefront
      dockerfile: Dockerfile
    depends_on:
      - backend
    ports:
      - "8000:8000"
    environment:
      NODE_ENV: development
      # NEXT_PUBLIC_STRIPE_KEY: 
      # NEXT_PUBLIC_PAYPAL_CLIENT_ID: 
      # NEXT_PUBLIC_SEARCH_APP_ID: 
      # NEXT_PUBLIC_SEARCH_ENDPOINT: http://127.0.0.1:7700
      # NEXT_PUBLIC_SEARCH_API_KEY: 
      # NEXT_PUBLIC_SEARCH_INDEX_NAME: products
      PORT: 8000
    networks:
      - bridged

Dockerfile

FROM node:18.15.0
EXPOSE 8000
WORKDIR /app/storefront
COPY package*.json ./
RUN rm -rf node_modules
RUN apt-get update
RUN npm install -g npm@latest
RUN npm install -g next-cli
COPY . .
RUN npm install
RUN npm run build &> /dev/null
COPY develop.sh .
ENTRYPOINT ["./develop.sh", "develop"]

develop.sh

#!/bin/bash

npm run $1

I wanted to report this issue so it can be addressed and resolved. Thank you for your attention to this matter.