Network-Error after Update #1725

Closed
opened 2020-05-18 09:30:44 +00:00 by m50434 · 19 comments

Hi,

I just updated my app and frontend.

Now suddenly I get an network error when I open Vikunja.

The Browser log says its a request block (Cross-Origin).

I hava Vikunja installed in a docker and using the nginx-conf as you suggested.

Did I miss any changes in prefs or something like that (because I made no changes - I just downloaded the new available docker containers).
Actually Vikunja worked for me.

Hi, I just updated my app and frontend. Now suddenly I get an network error when I open Vikunja. The Browser log says its a request block (Cross-Origin). I hava Vikunja installed in a docker and using the nginx-conf as you suggested. Did I miss any changes in prefs or something like that (because I made no changes - I just downloaded the new available docker containers). Actually Vikunja worked for me.
Owner

Do you have the api on a seperate port or host than the frontend? Cors errors should not occur if you have frontend and api on the same host.

Did you do any changes to the cors settings in the api?

Do you have the api on a seperate port or host than the frontend? Cors errors should not occur if you have frontend and api on the same host. Did you do any changes to the cors settings in the api?
Author

Thanks for your fast reply.

Yes, I have them on seperate ports.
Therefore I have this nginx-settings:

server {
listen 8090;

location / {
    proxy_pass http://192.168.2.30:8083;
}

location /api/ {
    proxy_pass http://192.168.2.30:3456;
}

}

Actually this worked. I didn't make any changes.
But after I updated the api and the frontend I get this network error.

Thanks for your fast reply. Yes, I have them on seperate ports. Therefore I have this nginx-settings: server { listen 8090; location / { proxy_pass http://192.168.2.30:8083; } location /api/ { proxy_pass http://192.168.2.30:3456; } } Actually this worked. I didn't make any changes. But after I updated the api and the frontend I get this network error.
Author

I found out that the request is to http://localhost:3456/api/v1/info
But actually it should be http://192.168.2.30:3456/api/v1/info

I didnt write localhost anywhere...
Do you have an idea where this "localhost" is defined?

Again: Actually I didnt change anything.

Thanks for ur help.

EDIT: I recreated vikunja from the old docker-images (end of April) => there is no network-error.

So it seems there are some changes in the last update which produce this network-error...

I found out that the request is to http://localhost:3456/api/v1/info But actually it should be http://192.168.2.30:3456/api/v1/info I didnt write localhost anywhere... Do you have an idea where this "localhost" is defined? Again: Actually I didnt change anything. Thanks for ur help. EDIT: I recreated vikunja from the old docker-images (end of April) => there is no network-error. So it seems there are some changes in the last update which produce this network-error...
Owner

Ah I see, did you build the frontend yourself or did you use the pre-built one?

Ah I see, did you build the frontend yourself or did you use the pre-built one?
Author

I used the pre-built one (I just pulled from docker vikunja:latest)

I used the pre-built one (I just pulled from docker vikunja:latest)
Owner

The new version is capable of setting the api url (for cases where you have the api on a different server/port than the frontend) - it should however set it by default to /api/v1 on the same server. http://localhost:3456/api/v1 is the default for that but it should be replaced at runtime.

Could you show the generated html served by the frontend? The window.API_URL part is the interesting thing here.

I found out that the request is to http://localhost:3456/api/v1/info
But actually it should be http://192.168.2.30:3456/api/v1/info

But if you're hosting with docker and are using the nginx example proxy configuration from the docs, you should be able to access the frontend at / of your server and the api at /api/v1 on the same server, without any ports.

The new version is capable of [setting the api url](https://vikunja.io/docs/install-frontend/#api-url-configuration-in-docker) (for cases where you have the api on a different server/port than the frontend) - it should however set it by default to `/api/v1` on the same server. `http://localhost:3456/api/v1` is the default for that but it should be replaced at runtime. Could you show the generated html served by the frontend? The `window.API_URL` part is the interesting thing here. > I found out that the request is to http://localhost:3456/api/v1/info > But actually it should be http://192.168.2.30:3456/api/v1/info But if you're hosting with docker and are using the nginx example proxy configuration from the docs, you should be able to access the frontend at `/` of your server and the api at `/api/v1` on the same server, without any ports.
Author

This is the generated html:

<!DOCTYPE html><html lang=en><head><title>Vikunja</title><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><meta name=description content="Vikunja (/vɪˈkuːnjə/) - The to-do app to organize your life."><!--[if IE]><link rel="icon" href="/favicon.ico"><![endif]--><link rel=preload crossorigin=anonymous href=/fonts/fonts.css as=style><link rel=preload crossorigin=anonymous href=/fonts/open-sans-v15-latin-700italic.woff2 as=font><link rel=preload crossorigin=anonymous href=/fonts/open-sans-v15-latin-italic.woff2 as=font><link rel=preload crossorigin=anonymous href=/fonts/quicksand-v7-latin-300.woff2 as=font><link rel=preload crossorigin=anonymous href=/fonts/quicksand-v7-latin-500.woff2 as=font><link rel=preload crossorigin=anonymous href=/fonts/quicksand-v7-latin-700.woff2 as=font><link rel=preload crossorigin=anonymous href=/fonts/open-sans-v15-latin-regular.woff2 as=font><link rel=preload crossorigin=anonymous href=/fonts/open-sans-v15-latin-700.woff2 as=font><link rel=preload crossorigin=anonymous href=/fonts/quicksand-v7-latin-regular.woff2 as=font><link href=/fonts/fonts.css rel=stylesheet><link href=/css/app.4628580a.css rel=preload as=style><link href=/css/chunk-vendors.a3fbd5f1.css rel=preload as=style><link href=/js/app.ee7e0e1f.js rel=preload as=script><link href=/js/chunk-vendors.5135a04d.js rel=preload as=script><link href=/css/chunk-vendors.a3fbd5f1.css rel=stylesheet><link href=/css/app.4628580a.css rel=stylesheet><link rel=icon type=image/png sizes=32x32 href=/images/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/images/icons/favicon-16x16.png><link rel=manifest href=/manifest.json><meta name=theme-color content=#5974d9><meta name=apple-mobile-web-app-capable content=yes><meta name=apple-mobile-web-app-status-bar-style content=default><meta name=apple-mobile-web-app-title content=Vikunja><link rel=apple-touch-icon href=/images/icons/apple-touch-icon-152x152.png><link rel=mask-icon href=/images/icons/safari-pinned-tab.svg color=#5974d9><meta name=msapplication-TileImage content=/images/icons/msapplication-icon-144x144.png><meta name=msapplication-TileColor content=#000000></head><body><noscript><strong>We're sorry but Vikunja doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script>//
	// This variable points the frontend to the api.
	// It has to be the full url, including the last /api/v1 part and port.
	// You can change this if your api is not reachable on the same port as the frontend.
	window.API_URL = 'http://localhost:3456/api/v1'
    //</script><script src=/js/chunk-vendors.5135a04d.js></script><script src=/js/app.ee7e0e1f.js></script></body></html>

I tried to use the api-environment-variable.
Since now I didnt figured out how to use it correctly.

I set $VIKUNJA_API_URL to http://192.168.2.30:3456 (for my case).
Furthermore I dont need my personal nginx.conf (see above) anymore.
Did I get it right?!

Anyway with seetings I got the same html-output and window.API_URL = 'http://localhost:3456/api/v1' again.

This is the generated html: ``` <!DOCTYPE html><html lang=en><head><title>Vikunja</title><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><meta name=description content="Vikunja (/vɪˈkuːnjə/) - The to-do app to organize your life."><!--[if IE]><link rel="icon" href="/favicon.ico"><![endif]--><link rel=preload crossorigin=anonymous href=/fonts/fonts.css as=style><link rel=preload crossorigin=anonymous href=/fonts/open-sans-v15-latin-700italic.woff2 as=font><link rel=preload crossorigin=anonymous href=/fonts/open-sans-v15-latin-italic.woff2 as=font><link rel=preload crossorigin=anonymous href=/fonts/quicksand-v7-latin-300.woff2 as=font><link rel=preload crossorigin=anonymous href=/fonts/quicksand-v7-latin-500.woff2 as=font><link rel=preload crossorigin=anonymous href=/fonts/quicksand-v7-latin-700.woff2 as=font><link rel=preload crossorigin=anonymous href=/fonts/open-sans-v15-latin-regular.woff2 as=font><link rel=preload crossorigin=anonymous href=/fonts/open-sans-v15-latin-700.woff2 as=font><link rel=preload crossorigin=anonymous href=/fonts/quicksand-v7-latin-regular.woff2 as=font><link href=/fonts/fonts.css rel=stylesheet><link href=/css/app.4628580a.css rel=preload as=style><link href=/css/chunk-vendors.a3fbd5f1.css rel=preload as=style><link href=/js/app.ee7e0e1f.js rel=preload as=script><link href=/js/chunk-vendors.5135a04d.js rel=preload as=script><link href=/css/chunk-vendors.a3fbd5f1.css rel=stylesheet><link href=/css/app.4628580a.css rel=stylesheet><link rel=icon type=image/png sizes=32x32 href=/images/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/images/icons/favicon-16x16.png><link rel=manifest href=/manifest.json><meta name=theme-color content=#5974d9><meta name=apple-mobile-web-app-capable content=yes><meta name=apple-mobile-web-app-status-bar-style content=default><meta name=apple-mobile-web-app-title content=Vikunja><link rel=apple-touch-icon href=/images/icons/apple-touch-icon-152x152.png><link rel=mask-icon href=/images/icons/safari-pinned-tab.svg color=#5974d9><meta name=msapplication-TileImage content=/images/icons/msapplication-icon-144x144.png><meta name=msapplication-TileColor content=#000000></head><body><noscript><strong>We're sorry but Vikunja doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script>// // This variable points the frontend to the api. // It has to be the full url, including the last /api/v1 part and port. // You can change this if your api is not reachable on the same port as the frontend. window.API_URL = 'http://localhost:3456/api/v1' //</script><script src=/js/chunk-vendors.5135a04d.js></script><script src=/js/app.ee7e0e1f.js></script></body></html> ``` I tried to use the api-environment-variable. Since now I didnt figured out how to use it correctly. I set $VIKUNJA_API_URL to http://192.168.2.30:3456 (for my case). Furthermore I dont need my personal nginx.conf (see above) anymore. Did I get it right?! Anyway with seetings I got the same html-output and window.API_URL = 'http://localhost:3456/api/v1' again.
Owner

Hmmm that's interesting, because try is running the same docker image and it works...

What frontend version are you using? You can see that on the js browser console when accessing the frontend (You need to enable info output).

Hmmm that's interesting, because [try](https://try.vikunja.io/) is running the same docker image and it works... What frontend version are you using? You can see that on the js browser console when accessing the frontend (You need to enable `info` output).
Author

This 0.13+2-d7b4b2189a is my frotend-version. It seems its the same like your try-version.

I the setting $VIKUNJA_API_URL to http://192.168.2.30:3456 correct in my case?
Or is it 192.168.2.30:3456 or http://192.168.2.30:3456/api/v1 or...?

This 0.13+2-d7b4b2189a is my frotend-version. It seems its the same like your try-version. I the setting $VIKUNJA_API_URL to http://192.168.2.30:3456 correct in my case? Or is it 192.168.2.30:3456 or http://192.168.2.30:3456/api/v1 or...?
Owner

You'd need to set it to the url where you can reach the api from your browser. If that's http://192.168.2.30:3456/api/v1, you'd need to put that in. In general you can verify by accessing the info endpoint from a browser, say if your api is installed at http://192.168.2.30:3456 you should be able to access http://192.168.2.30:3456/api/v1/info and then would need to put http://192.168.2.30:3456/api/v1/ in VIKUNJA_API_URL.

You'd need to set it to the url where you can reach the api from your browser. If that's `http://192.168.2.30:3456/api/v1`, you'd need to put that in. In general you can verify by accessing the info endpoint from a browser, say if your api is installed at `http://192.168.2.30:3456` you should be able to access `http://192.168.2.30:3456/api/v1/info` and then would need to put `http://192.168.2.30:3456/api/v1/` in `VIKUNJA_API_URL`.
Owner

I guess you're using the docker container as is without modifying anything?

I guess you're using the docker container as is without modifying anything?
Author

yes correctly. I only mapped the port in the docker-container (8083 -> 80)

BTW: I can reach the api at http://192.168.2.30:3456/api/v1 , but when I use this as setting for $VIKUNJA_API_URL it still does not work.

Do u have any further ideas? It is possible that there is the bug and the ENV VIKUNJA_API_URL does not work correctly?

My wife is killing me... and want to change to this microsoft-service now :-(

yes correctly. I only mapped the port in the docker-container (8083 -> 80) BTW: I can reach the api at http://192.168.2.30:3456/api/v1 , but when I use this as setting for $VIKUNJA_API_URL it still does not work. Do u have any further ideas? It is possible that there is the bug and the ENV VIKUNJA_API_URL does not work correctly? My wife is killing me... and want to change to this microsoft-service now :-(
Owner

but when I use this as setting for $VIKUNJA_API_URL it still does not work.

I guess it does not replace the api url in the served index html? Can you try with curl (that bypasses any caching or service workers)

It is possible that there is the bug and the ENV VIKUNJA_API_URL does not work correctly?

At this point I'd think it is possible... You can check that though:

  1. Start the container
  2. Get a bash running in the container (docker exec <vikunja frontend container name> -it bash)
  3. cat /usr/share/nginx/html/index.html
  4. There should be a line with something like window.API_URL = '/api/v1'
> but when I use this as setting for $VIKUNJA_API_URL it still does not work. I guess it does not replace the api url in the served index html? Can you try with curl (that bypasses any caching or service workers) > It is possible that there is the bug and the ENV VIKUNJA_API_URL does not work correctly? At this point I'd think it is possible... You can check that though: 1. Start the container 2. Get a bash running in the container (`docker exec <vikunja frontend container name> -it bash`) 7. `cat /usr/share/nginx/html/index.html` 8. There should be a line with something like `window.API_URL = '/api/v1'`
Author

I tried it with curl and with "cat /usr/share/nginx/html/index.html"

Both of them shows window.API_URL = 'http://localhost:3456/api/v1' :-(

I tried it with curl and with "cat /usr/share/nginx/html/index.html" Both of them shows window.API_URL = 'http://localhost:3456/api/v1' :-(
Owner

Honestly, I'm a bit lost here. It does not make any sense at all.
The whole point of docker containers is they are reproducable...

Have you tried throwing the container you had before away and starting a complete new one? No volumes or anything like that?

What do you get when running sed -i "s/http\:\/\/localhost\:3456\/api\/v1/http\:\/\/192\.168\.2\.30\:3456\/api\/v1/g" /usr/share/nginx/html/index.html in the container and then cat /usr/share/nginx/html/index.html?
That's the command that should be run on start which replaces the api url with the one from the env variable, just manually...

Does it work if you try to build the container manually? (just plain, git clone the repo and run docker build .)?

Do you get your api url if you clone the repo, change the api url in public/index.html and then build the docker container?

Honestly, I'm a bit lost here. It does not make _any_ sense at all. The whole point of docker containers is they are reproducable... Have you tried throwing the container you had before away and starting a complete new one? No volumes or anything like that? What do you get when running `sed -i "s/http\:\/\/localhost\:3456\/api\/v1/http\:\/\/192\.168\.2\.30\:3456\/api\/v1/g" /usr/share/nginx/html/index.html` in the container and then `cat /usr/share/nginx/html/index.html`? That's the command that should be run on start which replaces the api url with the one from the env variable, just manually... Does it work if you try to build the container manually? (just plain, `git clone` the repo and run `docker build .`)? Do you get your api url if you clone the repo, change the api url in `public/index.html` and then build the docker container?
Author

Hey,

first I tried "sed -i "s/http://localhost:3456/api/v1/http://192.168.2.30:3456/api/v1/g" /usr/share/nginx/html/index.html" and this really already worked. The API_URL was 192.168.2.30 !

Great.

After this I tried ur second suggestion: I totally deleted the image, downloaded again and built it: And the environemt variable "VIKUNJA_API_URL" worked !!! So this did the trick.
After this I changed the VIKUNJA_API_URL again (for testing), but I couldnt change it. I had to remove everthing again and build it again to change the VIKUNJA_API_URL again.
Thats wired... Maybe its something with my Docker, because Im using Docker with a Synology NAS.
But anyway: Now Vikunja is working !!!!
Yeah.
Thanks for ur fast replies and help !!!!

Hey, first I tried "sed -i "s/http\:\/\/localhost\:3456\/api\/v1/http\:\/\/192\.168\.2\.30\:3456\/api\/v1/g" /usr/share/nginx/html/index.html" and this really already worked. The API_URL was 192.168.2.30 ! Great. After this I tried ur second suggestion: I totally deleted the image, downloaded again and built it: And the environemt variable "VIKUNJA_API_URL" worked !!! So this did the trick. After this I changed the VIKUNJA_API_URL again (for testing), but I couldnt change it. I had to remove everthing again and build it again to change the VIKUNJA_API_URL again. Thats wired... Maybe its something with my Docker, because Im using Docker with a Synology NAS. But anyway: Now Vikunja is working !!!! Yeah. Thanks for ur fast replies and help !!!!
Owner

Glad it works now!

After this I tried ur second suggestion: I totally deleted the image, downloaded again and built it: And the environemt variable “VIKUNJA_API_URL” worked !!! So this did the trick.
After this I changed the VIKUNJA_API_URL again (for testing), but I couldnt change it. I had to remove everthing again and build it again to change the VIKUNJA_API_URL again.

Did you build the docker image as is or did you change the url and built after that?

because Im using Docker with a Synology NAS.

That could be it, but I'm not sure why it is causing that. Maybe the synology docker runtime sets some volumes. Are you able to check that? Maybe even with docker inspect from the cli?

Glad it works now! > After this I tried ur second suggestion: I totally deleted the image, downloaded again and built it: And the environemt variable “VIKUNJA_API_URL” worked !!! So this did the trick. > After this I changed the VIKUNJA_API_URL again (for testing), but I couldnt change it. I had to remove everthing again and build it again to change the VIKUNJA_API_URL again. Did you build the docker image as is or did you change the url and built after that? > because Im using Docker with a Synology NAS. That could be it, but I'm not sure why it is causing that. Maybe the synology docker runtime sets some volumes. Are you able to check that? Maybe even with `docker inspect` from the cli?
Author

I didnt change anything. I just built it from the docker image.

I tried to check it from the cli but I cant get any further informations about how the Docker-App of Synology handle this.

Its weird but I ll keep it in mind that I have to think about it before changing any env in my containers ;-)

I didnt change anything. I just built it from the docker image. I tried to check it from the cli but I cant get any further informations about how the Docker-App of Synology handle this. Its weird but I ll keep it in mind that I have to think about it before changing any env in my containers ;-)
Owner

Its weird but I ll keep it in mind that I have to think about it before changing any env in my containers ;-)

I guess NASes do weired stuff sometimes :)

Closing this as it seems to be resolved, feel free to reopen or create a new issue here or in the forum.

> Its weird but I ll keep it in mind that I have to think about it before changing any env in my containers ;-) I guess NASes do weired stuff sometimes :) Closing this as it seems to be resolved, feel free to reopen or create a new issue here or [in the forum](https://community.vikunja.io/).
Sign in to join this conversation.
No Milestone
No Assignees
2 Participants
Notifications
Due Date
The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: vikunja/vikunja#1725
No description provided.