hiteshchoudhary / apihub

Your own API Hub to learn and master API interaction. Ideal for frontend, mobile dev and backend developers.
https://freeapi.app
Other
6.74k stars 1.08k forks source link

BUG : Can't access localhost:8080 on docker, <ip-address>:8080 produce cors error on fetching #45

Closed akhademik closed 9 months ago

akhademik commented 1 year ago

Describe the bug

I tried to use localy by clone and npm install it works fine and i can access it via http://localhost:8080. But if i use docker, it wont work on http://localhost:8080 instead it will use the ip of that docker and yes i can access it via http://192.168.1.16:8080. The problem is that when i tried to make api request or like populate the data for todo or ecommerce it will tell me cors error, network failure, http and https stuff. but i think it all realated to the thing is http://localhost:8080 inaccessable

To Reproduce

just try to install it using the instruction as in this repo suggest, followw exact same steps:

Docker up and running, can't access locahost:8080 but can access 192.168.1.16:8080

Expected behavior

A clear and concise description of what you expected to happen. A way to make it accessable via localhost:8080 or if not 192.168.1.16:808 shouldn't produce the cors err when fetching data

Screenshots

If applicable, add screenshots to help explain your problem.

image

Screenshot 2023-08-31 at 15 37 29

Desktop (please complete the following information):

Additional context

Add any other context about the problem here.

wajeshubham commented 1 year ago

Hi @akhademik

Thank you for bringing this issue to our attention. We truly appreciate your diligence in pointing out this matter.

We are working towards to resolving this as quickly as possible. Please feel free to share any additional insights or observations that could assist us in better understanding the problem. We will keep you updated on our progress and aim to have this resolved soon.

Once again, thank you for your contribution and patience.

Best regards, FreeAPI team

akhademik commented 1 year ago

Hi @wajeshubham first of all thanks for your team great works.

now i want to add up some context and hope that might help your team to work it out. Actually i have a pc run 24/7 i use hypervisor to create lots of virtual machine on it, and one of them is for docker. My intention is that i'll make freeapi run 24/7 so i can use it anytime i want to.

To make it sort

my docker on PC01: my dev pc on PC02: my mac pc on PC03

All 3 of PCS from the same subnet of the network (192.168.1.xxx) mean they can see each other. I haven't tried to install docker on my dev PC and use it so i'm not sure if it work on that PC. But if somehow your team can find a solution to make it run on any ip witouht the cors issue that would be best because i'll use it on my 24/7 hypervisor PC.

In case you want some specific test for diagnosis please don't hestitate to reach me. I'll do it for you.

Best regards.

wajeshubham commented 1 year ago

Hello @akhademik ,

After careful analysis of the situation, we've compiled our observations and recommendations to help you overcome the challenges you're facing in your Docker environment.

Issue Analysis and Causes

  1. CORS Error: Likely due to the domain difference between the client and the server in the Docker setup.

  2. Docker IP vs localhost: Dockerized apps by default bind to Docker's IP, not localhost.

  3. HTTP/HTTPS Mismatch: If the client is using HTTPS but the Docker server is running on HTTP, this can cause issues.

  4. Network Failure: Could be due to the containerized network not allowing requests from outside by default.

Recommendations

  1. CORS Configuration

    • Update CORS settings to allow requests from different origins. We would recommend you to change CORS_ORIGIN variable in .env to * (or your container's IP) to allow all domains to make a request.
  2. Protocol Match

    • Ensure both client and server are using the same protocol, either HTTP or HTTPS. In our case it's http as we are dealing everything locally.
  3. Network Permissions

    • Update Docker network settings to allow external requests.

The above recommendations will guide you toward resolving the issue you're encountering.

Should you require further assistance or encounter any roadblocks while implementing these suggestions, please don't hesitate to reach out.

Thank you once again for your diligence and collaborative spirit in addressing this matter.

Best regards, FreeAPI team

akhademik commented 1 year ago

hi @wajeshubham , Thanks for your team effort. I tried to follow your instruction so

  1. i changed cors to * -> not working 2.i changed cors to http://192.168.1.16 -> not working 3.i changed cors to http://192.168.1.16:8080 -> not working

so any other thing i should change once again ?

Screenshot 2023-09-01 at 16 03 29

wajeshubham commented 1 year ago

@akhademik Did you restart/rebuild the server once you change the CORS_ORIGIN env var in the .env file? Also, make sure you are changing it in the .env and not in the .env.sample.

akhademik commented 1 year ago

@wajeshubham , yeah im pretty sure i did it correctly

at first i have fresh docker without apifree on it, i cloned, and then i make .evn and edit everything accordingly. Not work Then i stop the apifree service in my docker, edit .evn from * to the ip, save .evn and restart the service, still not work.

akhademik commented 1 year ago

I tried once again with edge and safari, this time i use with cors * and on safari it have differrent error. And as you can see, my docker ip, my webgui access for freeapi, and the terminal to confirm that i edited on the .env not env.sample

Screenshot 2023-09-01 at 17 12 34

wajeshubham commented 1 year ago

Can we see the terminal error logs of the server? to check if anything is breaking or not.

akhademik commented 1 year ago

Can we see the terminal error logs of the server? to check if anything is breaking or not.

show me how. i'll get it for you.

plutack1 commented 1 year ago

So your portainer also can’t be accessed via localhost:9443…. You should take a look at the pull request i made… in your case , you probably want to add this and uncomment to your docker-compose file. extra_hosts:

or in your current form reduplicate and redeploy your container while modifying localhost in cors_origin url to your docker bridge ip “192.168.1.16:3000”

this would be a temporary fix the way i understand it though. The moment you change your connection the ip also changes and this will break the container again. And probably even portainer won’t be accessible.

You should try to identify the underlying problem in your docker installation or would it be your portainer installation (i am not sure which) . Why you can’t use use localhost:9443 to access portainer for example.

NOTE: this is based on my assumption you can’t access portainer with localhost:9443

akhademik commented 1 year ago

no , i can't access portainer using localhost:9443

plutack1 commented 1 year ago

i am almost certain your problem is along the line discussed. I am not just sure the fix i am offering will help you bit i stongly advise you try it.. i deployed using a local mongoDB connection . I don’t know what cors origin is doing in terms of interacting with mogodb. I might probably encounter error when i fill in github credentials but i wouldnt know yet

Side thought: This might a portainer only issue..perhaps portainer isn't exposed to localhost but you now have at least two containers that have the same problem portainer and this freeapi container so maybe a firewall problem? Look int he line of allowing port forwarding ..i think ubuntu has ufw pre installed. Also to share your container logs since you’re using portainer, navigate to container click to open ..you should probably see inspect logs. Then copy out its contents.perhaps an experienced person could help. Make sure its running and logs are populated after you have done something to initiate the error

plutack1 commented 1 year ago

Also in your docker container screenshot..i think the inclusion of the published port field is important for more context.. at least for apihub container. Or better still state it out

akhademik commented 1 year ago

i am almost certain your problem is along the line discussed. I am not just sure the fix i am offering will help you bit i stongly advise you try it.. i deployed using a local mongoDB connection . I don’t know what cors origin is doing in terms of interacting with mogodb. I might probably encounter error when i fill in github credentials but i wouldnt know yet

Side thought: This might a portainer only issue..perhaps portainer isn't exposed to localhost but you now have at least two containers that have the same problem portainer and this freeapi container so maybe a firewall problem? Look int he line of allowing port forwarding ..i think ubuntu has ufw pre installed. Also to share your container logs since you’re using portainer, navigate to container click to open ..you should probably see inspect logs. Then copy out its contents.perhaps an experienced person could help. Make sure its running and logs are populated after you have done something to initiate the error

I have no error, i just can't access it via localhost:8080 but i can with local ip of the docker and the port 192.168.1.16:8080. And also the port is fine because first i can access it via port 8080 and secondly i do the port mapping for other docker i left the 8080 untouch so this one is binding 8080:8080 by default. I tried to see the log but it got nothing about the cors, or anything related to freeapi. Anyway thanks for your inpu.

plutack1 commented 1 year ago

I just read through your original addition of using 3 pc on the same local network… so if you’re accesing pc A portainer on pc B…you probably want to do the method i talked about…the add extra host method then replace every instance of localhost with host.docker.internal in the env file. This should work

plutack1 commented 1 year ago

i am almost certain your problem is along the line discussed. I am not just sure the fix i am offering will help you bit i stongly advise you try it.. i deployed using a local mongoDB connection . I don’t know what cors origin is doing in terms of interacting with mogodb. I might probably encounter error when i fill in github credentials but i wouldnt know yet Side thought: This might a portainer only issue..perhaps portainer isn't exposed to localhost but you now have at least two containers that have the same problem portainer and this freeapi container so maybe a firewall problem? Look int he line of allowing port forwarding ..i think ubuntu has ufw pre installed. Also to share your container logs since you’re using portainer, navigate to container click to open ..you should probably see inspect logs. Then copy out its contents.perhaps an experienced person could help. Make sure its running and logs are populated after you have done something to initiate the error

I have no error, i just can't access it via localhost:8080 but i can with local ip of the docker and the port 192.168.1.16:8080. And also the port is fine because first i can access it via port 8080 and secondly i do the port mapping for other docker i left the 8080 untouch so this one is binding 8080:8080 by default. I tried to see the log but it got nothing about the cors, or anything related to freeapi. Anyway thanks for your inpu.

Have you tried host.docker.internal in the env and the addition in the docker compose file? Localhost wont work as the guide implies form what I understand as localhost points to the docker container not the pc that runs docker

plutack1 commented 1 year ago

You also talked about getting errors whwn you try to populate the data for to do.. reproduce that, check your container logs and share that .

akhademik commented 1 year ago

Have you tried host.docker.internal in the env and rhe addition in the docker compose file?

Well it's a littlbe more complex than me or you though because the thing is the PC in which i have portainer it's not a standalone OS, i have proxmox which is a hypervisor on that PC and from that proxmox i created like 30 different VMs, and one of that VM is the portainer on 192.168.1.16:9443. And well it's not also a full VM but it's just a minimized LXC on it. So i got your idea about redirecting things to make localhost:8080 accessable but i'm don't konw how to start with my system. cause now i need to findout how lxc on proxmox works and edit it to make portainer works with it :(

akhademik commented 1 year ago

I'll try your approach see if it works and let you guys knows. But it might take a while cause i need to find out how to work it out that way :)

plutack1 commented 1 year ago

Have you tried host.docker.internal in the env and rhe addition in the docker compose file?

Well it's a littlbe more complex than me or you though because the thing is the PC in which i have portainer it's not a standalone OS, i have proxmox which is a hypervisor on that PC and from that proxmox i created like 30 different VMs, and one of that VM is the portainer on 192.168.1.16:9443. And well it's not also a full VM but it's just a minimized LXC on it. So i got your idea about redirecting things to make localhost:8080 accessable but i'm don't konw how to start with my system. cause now i need to findout how lxc on proxmox works and edit it to make portainer works with it :(

I actually misunderstood your context. And i might have done more rambling than make sense. But i think right now i understand your context. If every localhost url in the env is supposed to point to the host machine running docker and not the docker image itself..which i think that is the case.then every occurence of localhost needs to be changed to host.docker.internal

in your case since you’re using linux and are also using docker compose as it is.. the monent you try to populate the mongoDB database in the docker you get an error because the cors origin is not pointing to the host pc with local host rather the container’s This is from docker devs. https://github.com/moby/libnetwork/pull/2348#issuecomment-1177610499

I am probably not getting any error yet cos i am using mongoDB Locally so i am yet to use the cors_origin in any of my requests.. the moment i try to update the env with github logins and google login . I am certain i will get errors too. For linux at the very least.

So you probably don’t need to do anything to your current setup.it is working the way it is.. you just need to adjust the docker compose file and env file.

I apologize for the confusion.

akhademik commented 1 year ago

Not at all, thanks for your input, at least i know what need to be done :D Learning by fixing always fun.

wajeshubham commented 1 year ago

@akhademik @plutack1,

After reviewing your conversation, we've identified that dealing with multiple host machines is causing challenges in getting the project up and running smoothly. While we're actively addressing the ongoing issue with Linux, we'd like to offer a quick solution: self-hosting the FreeAPI server on Railway.

In our README.md, you'll find a one-click deployment button and comprehensive instructions on configuring your Railway app and deploying the FreeAPI server. This approach will alleviate the complexities of running it locally within the current intricate setup.

We highly recommend taking this step while we continue to work on the actual fix for Linux local deployment. We are always open to engaging in these stimulating discussions that not only benefit our community but also enhance our collective understanding of systems and troubleshooting challenging errors 😃.

Cheers! ✌🏼

Best regards, FreeAPI Team