How can I connect to a live DHIS2 instance from a localhost custom app

@didate @rithvik @austin good day.
I now have an instance of DHIS2 running live on a domain. When I start the app I was working on and it open in http://localhost:3000 I put the server information of the live instance it was not working. Before I use to put the localhost:8080 if I am using a local instance. Is it that I cannot connect http://localhost:3000 to a live instance? Or am I missing something?

Please note that I whitelist the 3000 port and have used proxy to start the app

@jetisco4u ,

If you have added proxy settings as per the guide below, it should work.

Also, by whitelisting the http://localhost:3000, in server settings, you should be able to achieve this.

Can you once try with firefox browser? Also, check the console for any errors.

Thanks,
Rithvik

@rithvik thanks for replying. I did add the proxy because I check that page before. Also I have whitelist it. It was working with localhost setting. But the issue started when I tried to connect live to my production instance. I just downloaded firefox and tried it before posting. Same issue

@jetisco4u ,

Do you see any errors in the console? If yes, can you share them here so that we can better understand the issue?

Thanks,
Rithvik

@rithvik yes I do. After the page loaded, only the username and password fields appear. But in the console I saw that the page was unable to fetch systeminfo with the error. After I login the same error display. When I check Network tab I get the following.

{httpStatus: "Unauthorized", httpStatusCode: 401, status: "ERROR", message: "Unauthorized"}

when I click the console error it took me to line 4 of the api.js file of adapter library with the line fetch(url, { ...options,

In response header I got

Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: http://localhost:3000
Access-Control-Expose-Headers: ETag, Location
Connection: keep-alive
Content-Length: 92
Content-Type: application/json;charset=UTF-8
Date: Mon, 12 Sep 2022 08:01:28 GMT
Server: nginx/1.14.0 (Ubuntu)
Vary: Origin
X-Content-Type-Options: nosniff
X-Frame-Options: SAMEORIGIN
X-XSS-Protection: 1; mode=block

@jetisco4u ,

As you are getting “Unauthorized” error, can you once verify the username & password you are entering?

Thanks,
Rithvik

The username and password is correct because the main domain instance is working. Its only in the localhost:3000 I am getting the unauthorize error.

@jetisco4u, I’m not sure about your use case but since youre accessing an instance through a proxy it should show an input field for server url where you have to enter your proxy address (the address youre proxying the live dhis2 through, usually localhost:8080 but could be anything. You will see it after you start the app via proxy) before a username and password fields.

Rather than using your instance address (which in your case is localhost:3000) or even the server address you should use the proxy address localhost:8080. Also you should use (localhost:*) in your whitelist to save you the trouble of having to add each address separately.

I don’t use proxies for my local instance but I’ve had to use it for app dev and I always make this mistake.

Please do let me know if this suggestion works.

@WumiOjo thanks for stopping by. When I was using localhost:8080 I don’t have issue connecting app to the server instance and I don’t use proxy. In this scenario, I am deploy the instance to a domain and it is online in an https://domain.com address. I have tried with or without proxy but it is not working. With proxy I enter the server address, without proxy I put the address in an env and it won’t show the server field but the same experience. I even tried to use the https://domain.com:8080 still no headway.

I am trying to use a localhost instance now but it seems it is conflicting with my other instance. So I am trying to change 8080 to another port for the localhost instance.

Hi @jetisco4u @rithvik @WumiOjo @tzemp

Have you resolved the issue? Could you share the solution please?
Enabled CORS, added to the NPM START command --proxy with local\remote address, started localhost on port 8080…
None of this Troubleshooting | DHIS2 Developer Portal recommendations have not work.

Thank you
Regards,
Ulanbek

@Ulanbek :

First, make sure that you’ve added the port that you are running your app on (e.g. 3000) to the allowed domains for your DHIS2 instance. You can do this in the settings app under Access > CORS Allowlist / CORS Whitelist

As suggested by Rithvik, you may also need to try using a proxy depending on the server settings (Proxy | DHIS2 Developer Portal)

You can start a proxy in your app, e.g. yarn start --proxy YOUR_INSTANCE. By default this should proxy the instance to port 8080. Once it has started, you can check that you can open http://localhost:8080 and then try to log in.

Finally, you can visit your app and connect it to the proxied server (i.e. localhost:8080):

Let us know how that goes or if you see any specific errors.

@tzemp thank you for your reply,

I have tried d2-app-scripts start --proxy but it failed. And as you mentioned I have added localhost:3000 into CORS list. It didn’t help as well.

Therefore I used dhis-portal app (GitHub - awgaan/dhis-portal) and it did the trick. I have no idea why we may need an additional app to get connected to the external address…

thanks @Ulanbek. Can you tell us a bit more about what error you got when you tried to run with the proxy? The idea of dhis2-portal app is similar to the proxy flag we have built into d2-app-scripts; if there’s a bug, we’d like to know so that we could fix it.

@tzemp I have tried to start with option --proxy YOUR_INSTANCE, but got an error:

{
“httpStatus”: “Unauthorized”,
“httpStatusCode”: 401,
“status”: “ERROR”,
“message”: “Unauthorized”
}