Fixing CORS error issue axois.get MissingAllowOriginHeader

Question

Okay so: I'm running a LightSail instance at www.gethatext.com.

FrontEnd - React, BackEnd - Django

On the homepage, I'm making 2 get requests to the Django server.

It is important to say that both Django & React are being served in the apache server.

.conf file of apache (http & https)

ProxyPass /api http://localhost:8000. # Django.
ProxyPassReverse /api http://localhost:8000 # Django.
ProxyPass / http://localhost:3000/. # React.
ProxyPassReverse / http://localhost:3000/. #React.

So I investigated and read that i need to add the following to the .conf file in either <Directory>, <Location> or <VirtualHost>. and so I did (and restarted all services of source).

<IfModule mod_headers.c>
   Header set Access-Control-Allow-Origin "*"
</IfModule>

BUT it did not help.

But when I'm making the same request from POSTMAN in my computer I get a the expected response (After running from the instance terminal python manage.py runserver 0.0.0.0:8000)

I Also added https://cors-anywhere.herokuapp.com to my request
So it looked like:

axois.get("https://cors-anywhere.herokuapp.com/https://gethatext.com/api/account/quantity/")....

and surprisingly IT WORKED..
But it doesn't feel like a good practice and also in terms of data privacy.

So I wonder what is it the problem here?

Is it related to that, that Django and React are both served in the same apache service?

Also add to axois header:

"Access-Control-Allow-Origin": "*"

But with no luck

Browser console error:

Cheers guys & Thanks in advnace.

Did you install django-cors on your project? if you didn't it yet, please check this `https://stackoverflow.com/questions/35760943/how-can-i-enable-cors-on-django-rest-framework` — Forest 1, Aug 04 '21 at 13:10
Yes I have, My Django project has corsheaders in the INSTALLED_APPS — Ben Koren Kruiger, Aug 04 '21 at 13:18
The ALLOWED_HOSTS is assigned to all ( "*" ) other wise I wold not get response from POSTMAN — Ben Koren Kruiger, Aug 04 '21 at 14:41
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/235627/discussion-between-forest-1-and-ben-koren-kruiger). — Forest 1, Aug 04 '21 at 14:42
`https://medium.com/@zoltankohalmy/react-and-django-57f949b0f012` Please check this. — Forest 1, Aug 04 '21 at 14:54

score -1 · Answer 1 · answered Aug 08 '21 at 06:44

-1

So the solution for this one was
Adding:

"proxy" : "https:my-domain.com".
to the package.json and in the axios requests.

axios.get("/upload/quantity/").then()...
And it worked

answered Aug 08 '21 at 06:44

Ben Koren Kruiger

121
4
11

Fixing CORS error issue axois.get MissingAllowOriginHeader

1 Answers1