I set up a django backend and a React frontend. The dango app renders the index.html where the production ready JS created with react is found.
But when developing locally, I develop the react frontend on my localserver:3000. Now I am trying to fetch data from my django backend, but I keep on getting a 401 Permission error. I know the problem is because the request comes from different hosts, but I don't know how to solve it.
My backend apis use token authentication, but even if I send the bearer token in the headers, I still get the same error:
My code for the request is simple:
axios
.get(`http://localhost:8000/path/to/data/`, {
headers: {
'Content-type': 'application/json',
Accept: 'application/json',
Authorization: `Bearer ${'here is my token'}`,
},
})
.then((response) => {
console.log(response);
})
.catch((error) => {
console.log(error);
});
When my react app makes this a production ready bundle and executes this on localhost:8000 there is no permission error, but I need to make it work from localhost:3000 because this is where I develop my app.
Help is very much appreciated. Thanks in advance