Justine Comments - Answer Overflow

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);
          });

13 replies

KPCKevin Powell - Community

•Created by Justine on 10/29/2024 in #front-end

api is not working on live site

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?

13 replies

KPCKevin Powell - Community

•Created by Justine on 7/30/2024 in #front-end

can someone help me?

we only use jquery in this particuar project. yup i just get it form an ai since i dont know yet how to do it i just ade it for sample to see the output. and still figuring it out how to exactly do it.

3 replies

KPCKevin Powell - Community

•Created by Justine on 7/18/2024 in #front-end

box tow column

thank you!appreciate your help🙂

3 replies

KPCKevin Powell - Community

•Created by Justine on 7/11/2024 in #front-end

any one experts is responsiveness here and willing to help?

ok thank you

12 replies

KPCKevin Powell - Community