I have currently developed a create react app and I am interested in creating a next.js backend for it. I have set up an API route on the server-side which will fetch data from another API and generate a response accordingly. I do not want to fully migrate my app to nextJS. I have tested the API route using the "insomnia" API design platform and it seems to be working fine.
The next.js server is running on localhost:3000 and the CRA (create react app) is on localhost:3001. However, when I try to use 'Fetch' from the CRA, I encounter an error in the console: "Access to fetch at 'http://localhost:3000/api/getExchangeRate' from origin 'http://localhost:3001' has been blocked by CORS policy".
How can I resolve this issue? I apologize if there are any errors in my terminology, as API calls and nextJS are new concepts for me.
Code:
//nextJS code
import axios from 'axios';
export default async function(req, res) {
const apiData = await axios.get(
`https://api.exchangerate.host/latest?base=${req.body.from}&symbols=${req.body.to}&places=3`
);
const dataKeys = Object.keys(apiData.data.rates);
const newData = dataKeys.map((eachId) => {
return apiData.data.rates[eachId];
});
const resRate = newData[0];
res.json({ rate: resRate, date: apiData.data.date });
}
//Create React App code:
const testApi = () => {
const body = {
from: 'USA',
to: 'ILS'
};
console.log(JSON.stringify(body));
const requestOptions = {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(body)
};
fetch('http://localhost:3000/api/getExchangeRate', requestOptions).then((response) => console.log(response));
};
Thank you in advance!