0

I am trying (unsuccessfully) to get data from my django backend, developed on repl.it, to my flutter frontend, developed on FlutLab. On Flutter side, I get data successfully from, for example, https://jsonplaceholder.typicode.com/users. On Django side, I render my data normally and get data by Postman, also without problem.

But if my frontend send get() request directly to backend, I see just my circular indicator.

My URL on Flutter/Dio looks like Response response = await Dio().get("https://djangobackend.myaccountname.repl.co/");

My ALLOWED_HOSTS on Django looks like

ALLOWED_HOSTS = ['djangobackend.myaccountname.repl.co', '0.0.0.0:3000', 'localhost', '127.0.0.1']

My browser is Chrome. My backend and frontend run on the same device (PC).

Actually I have no idea which host I need to use in this case, so, I just added all I could think of.

Is it possible to get data from my backend to frontend in this case and how to do it if yes?

If I need another IDE, please let me know. The limitation is: I can use online IDE only.

I also can provide more details if necessary.

All ideas are highly appreciated!

UPD: This is because of CORS policy, as you can see on attached screenshot.

1 Answers1

2

Your problem is probably related to CORS policy. To check it, please, open Dev Tools => Console on your browser. Probably you need to add 'api.flutlab.io' and 'flutlab.io' to the "Access-Control-Allow-Origin" header on the server-side. If you need some more help, please attach screen or text of errors from the console mentioned above.

alex.dr
  • 71
  • 3
  • Yes you're right! It is because of CORS policy, now I see it on the Console, as you recommended. I added a screenshot to my question with UPD, I hope you can see it. But how to reach Access-Control-Allows-Origin header properly? I tried django-cors-headers and then ´´´CORS_ALLOW_HEADERS = default_headers + ( 'Access-Control-Allow-Origin', )´´´ but it did not help:-( –  Apr 07 '21 at 09:40
  • Now it writes: "Invalid 'X-Frame-Options' header encountered when loading 'https:/***.id.repl.co/': '*' is not a recognized directive. The header will be ignored." I have X_FRAME_OPTIONS = "*". –  Apr 07 '21 at 11:54
  • Can you try follow https://pypi.org/project/django-cors-headers/ ? I hope this will be helpful. – alex.dr Apr 07 '21 at 18:46
  • Yes, as I wrote above in my first comment, I use django-cors-headers, and it did not help ( – I did not mentioned, both my backend and frontend run on the same device (PC). My browser is Chrome, maybe it plays role. – –  Apr 08 '21 at 06:18