I have a problem and I can't solve it in time. Who knows, maybe someone can help me.
I'm testing an application made in DJango Rest Framework (back-end) and NextJS (front-end). The problem I will mention is in NextJS.
I'm trying to make a request using the GET method to my backend to return values from my API. The request itself should return me in JSON format. Using NextJS I made the following model for testing:
src/pages/plans.tsx
import React, { useState, useEffect } from 'react';
import axios from 'axios';
axios.defaults.xsrfCookieName = 'csrftoken';
axios.defaults.xsrfHeaderName = 'X-CSRFToken';
const Plans = () => {
async function fetchData() {
try {
const response = await axios.get('/plans', {
data: null,
headers: {
Accept: 'application/json',
'Access-Control-Allow-Origin': '*'
}
});
const data = response.data;
console.log(data);
} catch (error) {
console.error(error);
}
}
return (
<button onClick={fetchData}>Buscar Dados</button>
);
}
export default Plans;
next.config.js
module.exports = {
async rewrites() {
return [
{
source: '/plans',
destination: `${process.env.BACKEND_URL}/plans`,
}
];
},
};
.env
BACKEND_HOST=127.0.0.1
BACKEND_URL=http://websette.localhost:8000
When I make the request, the raw value of the 'data' is returned in HTML, as in the example below:
<!DOCTYPE html><html lang="en"><head><style data-next-hide-fouc="true">body{display:none}</style><noscript data-next-hide-fouc="true"><style>body{display:block}</style></noscript><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><meta name="next-head-count" content="2"/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills.js?ts=1686444520245"></script><script src="/_next/static/chunks/webpack.js?ts=1686444520245" defer=""></script><script src="/_next/static/chunks/main.js?ts=1686444520245" defer=""></script><script src="/_next/static/chunks/pages/_app.js?ts=1686444520245" defer=""></script><script src="/_next/static/chunks/pages/plans.js?ts=1686444520245" defer=""></script><script src="/_next/static/development/_buildManifest.js?ts=1686444520245" defer=""></script><script src="/_next/static/development/_ssgManifest.js?ts=1686444520245" defer=""></script><noscript id="__next_css__DO_NOT_USE__"></noscript></head><body><div id="__next"><button>Buscar Dados</button></div><script src="/_next/static/chunks/react-refresh.js?ts=1686444520245"></script><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/plans","query":{},"buildId":"development","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
I've tried several ways and saw several people on the internet questioning about this problem but no solution. Has anyone managed to resolve this yet?
When I use postman to be able to test the URL of my backend, it works normally, so I think the problem is not in the backend.
Thanks
I need the front-end to return the API values in JSON provided by the back-end