3

I have a Linux Server. On that I have two Docker Containers.In the first one I am deploying my Flutter Web and in the other one I am running my RestAPI with FastAPI().

I set both the Docker containers in the same Network, so the communication should work. I also set origins with origins = ['*'] (Wildcard). I reverse proxy my Flutter web with nginx from the Linux server. I also include *.crt and *.key with nginx to my Flutter Web.

Now, obviously, since my Flutter Web App has https, I cant make http calls. When I am trying to make a call with https, I get the Error (from catch): "XMLHttpRequest error", and in the Browser Console I get:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://172.21.0.2:8070/. (Reason: CORS request did not succeed). Status code: (null).

(172.21.0.2 is the ip of the Docker and 8070 the port on RestApi running)

I am new to the RestAPI world. I normaly develop only Frontend. But I wanted to give it a try. So I'm sorry if I expressed some things wrong. I am searching since days but cant find a solution to my problem. I would be grateful for any help! (If i missed some information or you need more, feel free to write in the comments, I will update the Question immediately!)

Thank You!

Chris
  • 18,724
  • 6
  • 46
  • 80
MrOrhan
  • 877
  • 6
  • 21
  • 1
    If an error happens in the API, the CORS headers will not be included - i.e. meaning that any attempt to make the request from the frontend will fail with a CORS error. Your browser will probably not trust self-signed crt/keys either - what happens if you go directly to `https://172.21.0.2:8070/` in your browser? What's the result then? (CORS is only checked when the request is made on behalf of another page). What about using `curl` to call the endpoint? – MatsLindh Apr 14 '23 at 08:14
  • Same happened for me. For me it was during calling get method. So i changed to post method.It worked for me. – Uvais Apr 14 '23 at 08:34
  • @MatsLindh ty for your response. I couldnt answer earlier. Since all of them running on the ubuntu server edition, I cant check in the Browser. I know that I can reach the Docker. I also checked the Network Monitor on Firefox and can see "NS_ERROR_NET_TIMEOUT". I deploy my API with with uvicorn through the Docker with : "FROM tiangolo/uvicorn-gunicorn-fastapi:python3.9" . – MrOrhan Apr 19 '23 at 14:12
  • 1
    You may find [this](https://stackoverflow.com/a/71805329/17865804) and [this](https://stackoverflow.com/a/75048778/17865804), as well as [this](https://stackoverflow.com/a/75041731/17865804), [this](https://stackoverflow.com/a/74106637/17865804) and [this](https://stackoverflow.com/a/73963905/17865804) helpful – Chris Apr 19 '23 at 16:04

1 Answers1

3

I solved my problem. If anyone face the same problem in the future, here is the answer. My mistake was to call the server with http/https, while in the same (Docker) Network. So I changed:

final Uri tokenUri = Uri.https(urlList[index]['url']!, '');

to

final Uri tokenUri = Uri.parse('${urlList[index]['url']!}/');

One week of search for such an easy solution.

Chris
  • 18,724
  • 6
  • 46
  • 80
MrOrhan
  • 877
  • 6
  • 21