0

In my Next.js application, I'm using the App Router and I want to make a GET request to a third-party API. But I get this error:

Access to fetch at 'https://thirdpartyapi.com/search' from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response.

I saw somewhere that using a proxy server works, but I'm not sure that's the approach to take with Next.js. What is the easiest way to resolve this issue in Next.js app router?

Olabisi Olaoye
  • 5
  • 2
  • May I ask if you understand the reasons for the CORS error in the first place? If a third-party site is configured to reject cross-origin requests then that's a good sign you probably should contact the operators of the site first instead of hacking around it with proxied requests (and of course, using proxied requests won't help you if the external site requires browser-based authX). – Dai Sep 02 '23 at 18:25
  • According to the documentation of the third-party API, all that's needed to make a request is an API key, which I have added to my request headers. I'll take a closer look at the documentation though; thanks! – Olabisi Olaoye Sep 02 '23 at 18:38
  • I was asking if you understood the core concepts involved in CORS scenarios, not about their specific API. – Dai Sep 02 '23 at 18:42
  • Does this answer your question? [No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API](https://stackoverflow.com/questions/43871637/no-access-control-allow-origin-header-is-present-on-the-requested-resource-whe) – jub0bs Sep 02 '23 at 20:48
  • @Dai I'm actually a beginner so the concepts are not so clear to me. – Olabisi Olaoye Sep 02 '23 at 21:00

0 Answers0