Http://localhost:3000 has been blocked by CORS policy - running nextjs localhost with huggingface spaces

Beginners
1

i’m trying to set up nextjs as the front end and then using gradio API with hugging face spaces, however, I’m getting a CORS error:

Access to fetch at ‘https://levelingup-modelnew.hf.space/’ from origin ‘http://localhost:3000’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

error message. Is it because I’m using localhost, and then trying to fetch a different address (hugging face space)? If so, is there a way to allow local host? If not, what would be the best way to test this?

I’ve also set up a fetch with Authorization: Bearer

const { prompt } = data;
const app = await fetch("https://levelingup-modelnew.hf.space/", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    "Authorization": `Bearer ${process.env.HF_API_KEY}`      
  },
  body: JSON.stringify({prompt})
});
1 Like
2

You may try to use addons for browser . Try going to firefox market and search for the keywrod “CORS”