CORS issue within next.js app | Next.js | Page 1

deep halo Jan 29, 2023, 4:34 AM

#

Hi so all day I've been trying to grab data from an external API. Using postman, I'm able to send a get request to it and it's fine; but when I use fetch to call the API in my next.js app, I get a cross origin error. Easy fix, just add the allow headers? But no, it cannot get it to work properly. I installed a CORS chrome extension and the localhost was able to call the request to the external API but that's obviously just a temp fix.

fetch('https://ANYAPI.cloud/api/info')
      .then(response => response.json())
      .then(data => setInfo(data))
      .catch(error => console.error(error));

I've looked up ways to workaround CORS but they either didn't work or were something unrelated. Is there some special configuration that I'm missing?

#

for fetch i previously tried mode: CORS and Access-Control-Allow-Origin etc

neon basalt Jan 29, 2023, 4:35 AM

#

deep halo Hi so all day I've been trying to grab data from an external API. Using postman,...

You have to set up cors in your backend

#

This is not something the frontend can fix

#

If you own anyapi.cloud, add cors headers to it

deep halo Jan 29, 2023, 4:35 AM

#

neon basalt You have to set up cors in your backend

my backend does have cors

neon basalt Jan 29, 2023, 4:36 AM

#

Well idk flask so I can’t tell, but look up the documentation to see how to “allow” certain request origins

fleet frost Jan 29, 2023, 1:03 PM

#

deep halo my backend does have cors

Can you show your call to the route? app.route() part

#CORS issue within next.js app