Kevin Powell - Community•3w ago

api is not working on live site

hi guys maybe someone can enlighten me about the api on how do i get a live api for my deployment, because currently i deployed my project in vercel not knowing that i have not yet turn my local host into live?the image is not there but the text is there

8 Replies

hgs•3w ago

Check dev console for more details

JustineOP•3w ago

i think the problem is my fetch is a local host. can you pls help me how do i make the local host in public?

dys 🐙•3w ago

ngrok will allow you to tunnel a port on localhost out to the public Internet. It's not hard for an experienced dev to operate, but it sounds like you might be less experienced. In the long term you need your API server to be running on a machine outside of your LAN. If you're using Next.js for your API server, it will be running on whatever hostname Vercel gives you. Connect to that host rather than localhost. Without knowing more about your architecture, it's difficult to diagnose this & give suggestions.

JustineOP•3w ago

i use render to deploy my api so i can use this url in my front end but then i encounter this issue Access to fetch at 'https://restaurant-recipe-1.onrender.com/gallery' from origin 'http://localhost:3000' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 'http://localhost:5173' that is not equal to the supplied origin. Have the server send the header with a valid value, or, if an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. in server.js i already have this

 app.use(cors({
    origin: ['http://localhost:3000', 'http://localhost:5173'],
    methods: ['GET', 'POST', 'PUT', 'DELETE'],
    credentials: true, // if you need to send cookies with the request
}));
and configured also the proxy
import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server: {
    proxy: {
      '/api': {
        target: 'https://restaurant-recipe-1.onrender.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },
});
so in my front end i use this 
fetch('https://restaurant-recipe-1.onrender.com/gallery')
          .then(response => {
            if (!response.ok) {
              throw new Error(`HTTP error! Status: ${response.status}`);
            }
            return response.json();
          })
          .then(data => {
            gallery.value = data.data.gallery;
          })
          .catch(error => {
            console.error('Error fetching data:', error);
          });

 app.use(cors({
    origin: ['http://localhost:3000', 'http://localhost:5173'],
    methods: ['GET', 'POST', 'PUT', 'DELETE'],
    credentials: true, // if you need to send cookies with the request
}));
and configured also the proxy
import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server: {
    proxy: {
      '/api': {
        target: 'https://restaurant-recipe-1.onrender.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },
});
so in my front end i use this 
fetch('https://restaurant-recipe-1.onrender.com/gallery')
          .then(response => {
            if (!response.ok) {
              throw new Error(`HTTP error! Status: ${response.status}`);
            }
            return response.json();
          })
          .then(data => {
            gallery.value = data.data.gallery;
          })
          .catch(error => {
            console.error('Error fetching data:', error);
          });

clevermissfox•3w ago

To format your code blocks, use three backticks at the start and end of your code block. You can also add the language like

```css
.mycode {...}

```css
.mycode {...}

```

JustineOP•3w ago

thank you anyone can help? maybe we can call?

dys 🐙•3w ago

You see on the second line where you're setting the CORS origins? Add your Render server there.

JustineOP•3w ago

ok will try it now i add all the url i have in the cors and now it work https://restaurant-recipe-project.vercel.app/

Gaming

Programming

api is not working on live site