search

artreimus / ai-mern-image-generator

This is an AI image generator built using the MERN stack (MongoDB, Express.js, React, and Node.js). The purpose of the application is to generate unique and creative images using a trained machine learning model. The application is similar to Midjourney and DALL-E, which are also AI-powered image generation tools.
5 stars 1 forks source link

problem on load client (TypeError: Failed to fetch) #1

Closed bugbounted closed 1 year ago

bugbounted commented 1 year ago

Hi artreimus, I'm trying to deploy your project on render & set client & server app like settiong below :

webserver url : https://midjourneycore.onrender.com Root Directory : server Build Command : npm install Start Command : npm start env vars : CLOUDINARY_API_KEY , CLOUDINARY_API_SECRET, CLOUDINARY_CLOUD_NAME , MONGO_URI , OPENAI_API_KEY , PORT & also manually make folder in Cloudinary Media Library named 'ai-mern-image-generator' & also change all https://ai-mern-image-generator-api.onrender.com to my own api url in all files of server

client static site url : https://midjourney-s4pi.onrender.com Root Directory : client Build Command : npm run build Publish directory : dist & also change all https://ai-mern-image-generator-api.onrender.com to my own api url in all files of client

but having error below on load of client page & also in create page after click on create button : TypeError: Failed to fetch

waiting for your response finest regards

artreimus commented 1 year ago

Hi @bugbounted,

I observed in the developer tools network tab that you are getting a CORS error when you are making a request to the server. The backend that I made utilizes a CORS middleware that will block API calls from unauthorized origins.

image

You can fix the error by editing the allowedOrigins.js (located at /server/config/allowedOrigin.js) to include your hosted client URL. Cheers! :)

image