Issues arise when attempting to retrieve information in NextJS from a local API

Question

Issues arise when attempting to retrieve information in NextJS from a local API

One of my coworkers has created a backend application using Spring Boot. Strangely, I can only access the API when both our computers are connected to the same hotspot. If I try to access the other computer's API and port through a browser or Postman, I am able to retrieve data from the REST API without any issues

However, when I attempt to fetch data using Axios or the fetch() method in my application,

the fetch method responds like this:

and Axios responds like this:

Can anyone provide guidance on how to resolve this issue?

PS: I have included the temporary code snippet for fetching here.

javascript next.js axios fetch

Answer 1

Answer №1

There could possibly be a CORS authorization issue, additional information is required for further troubleshooting.

We suggest enabling CORS for the resetApi application as a potential solution.

Answer 2

There could possibly be a CORS authorization issue, additional information is required for further troubleshooting.

We suggest enabling CORS for the resetApi application as a potential solution.

Answer 3

Answer №2

To resolve CORS issue,

The axios method is one way to address it.

If you are using an Express app, ensure it has CORS (Cross-Origin Resource Sharing) enabled by adding the following snippet to your server file:

// Ensure this is already declared in your API file
var app = express();

// ADD THIS
var cors = require('cors');
app.use(cors());

Additionally, when utilizing the fetch method, remember to include async and await.

Answer 4

To resolve CORS issue,

The axios method is one way to address it.

If you are using an Express app, ensure it has CORS (Cross-Origin Resource Sharing) enabled by adding the following snippet to your server file:

// Ensure this is already declared in your API file
var app = express();

// ADD THIS
var cors = require('cors');
app.use(cors());

Additionally, when utilizing the fetch method, remember to include async and await.

Issues arise when attempting to retrieve information in NextJS from a local API

Answer №1

Answer №2

Similar questions

Send back alternate HTML content if the request is not made via AJAX

Error when using jQuery AJAX to parse JSONP callback

The value of req.files consistently shows as undefined

Enhancing Communication Between JavaScript and PHP

Comparing jQuery and Yahoo UI API Design

Could anyone provide recommendations on how to globally declare jQuery in a Vue-CLI 3 project?

The bootstrap table did not meet my expectations as I had hoped

Using json_encode with chart.js will not produce the desired result

Tips for being patient while waiting for a function to return a value

How to switch the code from using $.ajax() to employing $.getJSON in your script

What is the most effective method for inputting a date/time into a Django view?

Find the identification number by searching through the text

Dropping challenging shapes in a block-matching game similar to Tetris

Tips for presenting JSON date in JavaScript using Google Chart

What could be causing the incorrect updating of React State when passing my function to useState?

It appears that GetServerSideProps may not be getting invoked

There are no functions or classes returned when using NPM Link with the module

Is there a way to detect and handle errors triggered by a callback function?

The Redux store has been modified, yet the changes are not reflected in the

"Hmm, the React context's state doesn't seem to be changing