GrampsJS Setup - CORS Error and port change request

I am back again with question related to GrampsJS now. I have a few of them.
The API is running well and am able to query it (it is hosted on Synology via Docker)
The config for the webapi:

TREE="MyFam"  # set the name of your family tree
SECRET_KEY="..." # set your secret key
DISABLE_AUTH=True
# do not change the following lines as they refer to paths within the container
USER_DB_URI="sqlite:////app/users/users.sqlite"
MEDIA_BASE_DIR="/app/media"
SEARCH_INDEX_DIR="/app/indexdir"
STATIC_PATH="/app/static"
CORS_ORIGINS="*"

I have the CORS_ORIGIN set to * to allow access from all domains.

Following the steps:

  1. Clone the grampsjs repo
  2. Changed the API URLs in 3 files:
  1. npm install
  2. npm run start

It opens up and the usual start is working fine. I get to select the language, home person and continue. Then the errors start creeping up.

:1 Access to fetch at 'http://192.168.1.135:5053/api/translations/en_GB?strings=[%22_Names%22,%22_Save%22,%22Abbreviation%22,%22About%22,%22Add%20an%20existing%20person%20as%20a%20child%20of%20the%20family%22,%22Add%22,%22Address%20Note%22,%22Addresses%22,%22After%22,%22Age%20at%20death%22,%22and%22,%22Archive%22,%22Association%20Note%22,%22Association%22,%22Associations%22,%22Attribute%20Note%22,%22Attributes%22,%22Author%22,%22Before%22,%22Birth%20Date%22,%22Birth%20Place%22,%22Birth%22,%22Borough%22,%22Building%22,%22Calculated%22,%22Call%20name%22,%22Cancel%22,%22Child%20Reference%20Note%22,%22Children%22,%22Citation%22,%22Citations%22,%22City%22,%22Clear%22,%22Collection%22,%22Complete%22,%22Con_fidence%22,%22Country%22,%22County%22,%22Custom%22,%22Dashboard%22,%22Database%20overview%22,%22Date%22,%22Death%20Date%22,%22Death%20Place%22,%22Death%22,%22Department%22,%22Description%22,%22Details%22,%22District%22,%22done%22,%22E-mail%22,%22Edit%20Citation%22,%22Edit%20Event%22,%22Edit%20Family%22,%22Edit%20Media%20Object%22,%22Edit%20Note%22,%22Edit%20Person%22,%22Edit%20Place%22,%22Edit%20Repository%22,%22Edit%20Source%22,%22Enclosed%20By%22,%22Error%22,%22Estimated%22,%22Event%20Note%22,%22Event%20Reference%20Note%22,%22Event%20Type%22,%22Event%22,%22Events%22,%22Families%22,%22Family%20Note%22,%22Family%20Tree%22,%22Family%22,%22Farm%22,%22Father%22,%22Female%22,%22File%22,%22Full%20Name%22,%22Gallery%22,%22Gender%22,%22General%22,%22Given%20name%22,%22Gramps%20ID%22,%22Hamlet%22,%22High%22,%22Home%20Page%22,%22Html%20code%22,%22in%22,%22Language%22,%22Last%20changed%22,%22LDS%20Note%22,%22Library%22,%22Loading%20items...%22,%22Locality%22,%22Low%22,%22Male%22,%22Map%22,%22Marriage%20Date%22,%22Married%22,%22Max%20Ancestor%20Generations%22,%22Max%20descendant%20Generations%22,%22Media%20Note%22,%22Media%20Object%22,%22Media%20Objects%22,%22Media%20Reference%20Note%22,%22Media%22,%22Military%20Service%22,%22Mother%22,%22Municipality%22,%22Name%20Note%22,%22Name%22,%22Neighborhood%22,%22New%20Citation%22,%22New%20Event%22,%22New%20Family%22,%22New%20Media%22,%22New%20Note%22,%22New%20Person%22,%22New%20Place%22,%22New%20Repository%22,%22New%20Source%22,%22Next%22,%22Nick%20name%22,%22Nickname%22,%22No%20items%22,%22Normal%22,%22Not%20found%22,%22Note%22,%22Notes%22,%22Number%20of%20citations%22,%22Number%20of%20events%22,%22Number%20of%20families%22,%22Number%20of%20generations:%22,%22Number%20of%20individuals%22,%22Number%20of%20media%22,%22Number%20of%20notes%22,%22Number%20of%20people%22,%22Number%20of%20places%22,%22Number%20of%20repositories%22,%22Number%20of%20sources%22,%22Number%20of%20tags%22,%22Number%22,%22Page%22,%22Parents%22,%22Parish%22,%22Participants%22,%22Partner%22,%22Password:%22,%22Path%22,%22People%22,%22Person%20Note%22,%22Person%22,%22Place%20Note%22,%22Place%22,%22Places%22,%22Prefix%22,%22Previous%22,%22Primary%22,%22Private%22,%22Province%22,%22Publication%20info%22,%22Quality%22,%22Range%22,%22References%22,%22Refresh%22,%22Region%22,%22Regular%22,%22Regular%22,%22Relationship%20to%20_Father:%22,%22Relationship%20to%20_Mother:%22,%22Relationship%20type:%22,%22Relationships%22,%22Repositories%22,%22Repository%20Note%22,%22Repository%20Reference%20Note%22,%22Repository%22,%22Research%22,%22Reset%22,%22Role%22,%22Second%20date%22,%22Select%20a%20file%22,%22Select%20a%20person%20as%20the%20father%22,%22Select%20a%20person%20as%20the%20mother%22,%22Select%20an%20existing%20media%20object%22,%22Select%20an%20existing%20note%22,%22Select%20an%20existing%20place%22,%22Select%20an%20existing%20source%22,%22Select...%22,%22Select%22,%22Selected%22,%22Set%20_Home%20Person%22,%22Share%20an%20existing%20event%22,%22Show%20Details%22,%22Siblings%22,%22Social%20Security%20Number%22,%22Source%20Note%22,%22Source%20Reference%20Note%22,%22Source%20text%22,%22Source:%20Author%22,%22Source:%20Title%22,%22Source%22,%22Sources%22,%22Span%22,%22Spouses%22,%22State%22,%22Statistics%22,%22Street%22,%22Suffix%22,%22Surname%22,%22Tag%22,%22Tags%22,%22Text%22,%22This%20field%20is%20mandatory%22,%22Timeline%22,%22Title%22,%22To%20Do%22,%22Town%22,%22Transcript%22,%22Type%22,%22Unknown%22,%22Username:%20%22,%22Value%22,%22Very%20High%22,%22Very%20Low%22,%22Village%22,%22Web%20Home%22,%22Zoom%22]' from origin 'http://192.168.1.107:8000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Need help fixing this error, because my plan is to setup GrampsJS on Synology itself and make it persistent. Then use reverse proxy and access it via a domain, so that my family/extended family can all contribute one day.

Also another request is a little help to be able to change the port number from the default 8000 to something else please.
I understand package.json usually can be used to change the port. Was hoping I can request this change.

Sorry @DavidMStraub , I know this is a lot… but at your convenience :slight_smile:

Hi,

can you please check the server logs (something like docker-compose logs --tail 150 gramps_webapi)? I suspect you’re hitting this Web API issue; it can be fixed with an additional parameter to gunicorn; the latest-dev Docker image has this fix.

In general: using npm run start to serve Gramps.js only makes sense when you want to develop the frontend. For deployment, please use the built version. I’ve started attaching a Gzipped build to releases on Github.

Hey @DavidMStraub sorry about the delay.
I have pasted the log file (from portainer) which I am hoping is what you asked me to check. I do see the errors, except I am not sure how and where to start fixing them.
grams-webapi docker logs
Unable to init server: Could not connect: Connection refused
Do you think this is causing the issue?
Also I notice: Listening at: http://0.0.0.0:5000 (8) in the log file.

192.168.1.135:5053/api/metadata/ works well with the right information shown on the browser and so I know the API is at least running.

Thanks for the second answer there, makes complete sense. Will use the deployed one.

One issue is

ValueError: count must be a positive integer (got 0)

which indicates that there is an empty index.html file at the root of the static dir, see this issue. This will be the case when you call http://192.168.1.135:5053/ (the backend URL) in your browser. Did you do that? Everything else looks good, Unable to init server is just a warning as the Gramps GUI cannot find a display.

1 Like

I’m still pretty sure the error in the browser console is http 400 error when accessing /api/translations/ · Issue #225 · gramps-project/gramps-webapi · GitHub, have you tried with the current latest-devel image?

Fixed this by appending the index.html file as mentioned in the issue.
I am glad the rest looks good.

No I have not used the latest-devel image as the tag I used to pull is just latest. I am assuming its best to wait unless you would like me to test devel which I would be happy.

Hi @DavidMStraub still no luck for me… The console says CORS errors:

Access to fetch at 'http://192.168.1.135:5053/api/translations/en_GB?strings=...' from origin 'http://localhost:8000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

the gramps-webapi’s config I like I mentioned earlier: CORS_ORIGINS="*"

So I am still lost just as much as the beginning. ALso, the fix I thought of trying in the docker file to increase the length of the request to ‘–limit-request-line 8190’ is already there and so now again I am not sure where else to change it if I am just directly running npm run start.

I have not taken the latest:dev tag for the webapi docker image.

Sorry if I am taking the completely wrong path.

Ok; if you want to use the released Docker image I suggest to try again in a few days when the next version is released (v0.2 · Issue #232 · gramps-project/gramps-webapi · GitHub). It’s more difficult to debug the old version, also because the flask errors are not shown by gunicorn (Forward logs to gunicorn by DavidMStraub · Pull Request #223 · gramps-project/gramps-webapi · GitHub).

1 Like

Ah the wait is over…
Thanks @DavidMStraub will get the latest and modify the installation to check.
However, I am assuming I need to wait for the docker hub update.

Sorry David, still getting the same error to be honest. I need to some how allow the CORS access and that is the error cropping up all the time.

Access to fetch at 'http://192.168.1.135:5053/api/translations/en_GB?strings=...' from origin 'http://localhost:8000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

OK, at least we excluded some possibilities.

Can you please again check the server logs? It should now be more verbose.

Here is the latest logs:

[2021-10-24 18:41:32 +0000] [7] [INFO] Starting gunicorn 20.1.0,
[2021-10-24 18:41:32 +0000] [7] [INFO] Listening at: http://0.0.0.0:5000 (7),
[2021-10-24 18:41:32 +0000] [7] [INFO] Using worker: sync,
[2021-10-24 18:41:32 +0000] [10] [INFO] Booting worker with pid: 10,
[2021-10-24 18:41:32 +0000] [11] [INFO] Booting worker with pid: 11,
[2021-10-24 18:41:32 +0000] [12] [INFO] Booting worker with pid: 12,
[2021-10-24 18:41:32 +0000] [13] [INFO] Booting worker with pid: 13,
[2021-10-24 18:41:32 +0000] [14] [INFO] Booting worker with pid: 14,
[2021-10-24 18:41:32 +0000] [15] [INFO] Booting worker with pid: 15,
[2021-10-24 18:41:32 +0000] [16] [INFO] Booting worker with pid: 16,
[2021-10-24 18:41:32 +0000] [17] [INFO] Booting worker with pid: 17,
[2021-10-24 18:41:49 +0000] [17] [ERROR] Error handling request,
Traceback (most recent call last):,
File “/usr/local/lib/python3.7/dist-packages/gunicorn/workers/sync.py”, line 182, in handle_request,
resp.write_file(respiter),
File “/usr/local/lib/python3.7/dist-packages/gunicorn/http/wsgi.py”, line 385, in write_file,
if not self.sendfile(respiter):,
File “/usr/local/lib/python3.7/dist-packages/gunicorn/http/wsgi.py”, line 375, in sendfile,
self.sock.sendfile(respiter.filelike, count=nbytes),
File “/usr/lib/python3.7/socket.py”, line 402, in sendfile,
return self._sendfile_use_sendfile(file, offset, count),
File “/usr/lib/python3.7/socket.py”, line 266, in _sendfile_use_sendfile,
self._check_sendfile_params(file, offset, count),
File “/usr/lib/python3.7/socket.py”, line 381, in _check_sendfile_params,
“count must be a positive integer (got {!r})”.format(count)),
ValueError: count must be a positive integer (got 0),
[2021-10-24 18:44:39 +0000] [8] [INFO] Starting gunicorn 20.1.0,
[2021-10-24 18:44:39 +0000] [8] [INFO] Listening at: http://0.0.0.0:5000 (8),
[2021-10-24 18:44:39 +0000] [8] [INFO] Using worker: sync,
[2021-10-24 18:44:39 +0000] [11] [INFO] Booting worker with pid: 11,
[2021-10-24 18:44:39 +0000] [12] [INFO] Booting worker with pid: 12,
[2021-10-24 18:44:39 +0000] [13] [INFO] Booting worker with pid: 13,
[2021-10-24 18:44:39 +0000] [15] [INFO] Booting worker with pid: 15,
[2021-10-24 18:44:39 +0000] [16] [INFO] Booting worker with pid: 16,
[2021-10-24 18:44:39 +0000] [19] [INFO] Booting worker with pid: 19,
[2021-10-24 18:44:39 +0000] [20] [INFO] Booting worker with pid: 20,
[2021-10-24 18:44:39 +0000] [21] [INFO] Booting worker with pid: 21,
Unable to init server: Could not connect: Connection refused,
Unable to init server: Could not connect: Connection refused,

Hopefully this is much more helpful.

Just realized there is a bug in the new image, sorry. Demo broken again · Issue #235 · gramps-project/gramps-webapi · GitHub Fill try to fix it immediately.

haha no worries…
Will wait and not in a hurry anyway.

[A post needs to be at least 20 characters long.]

Fixed.

1 Like

Upgraded the image although the error refused to go away.

The logs now only shows this line and not really verbose anymore.

Unable to init server: Could not connect: Connection refused

in gramps.js I have made sure to connect to ‘http://192.168.1.135:5053
Yet it l

Can you please share again exactly what you’re doing? Which versions, config file, commands? Thanks!

@DavidMStraub Here are the steps I followed:

  1. Installed grams-webapi with the following docker compose and config file
version: "3.7"

services:
  gramps_webapi:
    container_name: gramps-webapi
    image: dmstraub/gramps-webapi:latest
    restart: unless-stopped
    ports:
      - "5053:5000"
    environment:
      TREE: "MyFam" # set the name of your family tree
      SECRET_KEY: "myActualSecretKeyOfProperLength" # set your secret key
      BASE_URL: "http://192.168.1.135:5053"
    volumes:
      - gramps_users:/app/users
      - gramps_index:/app/indexdir
      - gramps_thumb_cache:/app/thumbnail_cache
      - /volume1/docker/gramps/config/config.cfg:/app/config/config.cfg
      - /volume1/docker/gramps/grampsdb:/root/.gramps/grampsdb
      - /volume1/docker/gramps/gramps_media:/app/media

volumes:
  gramps_users:
  gramps_index:
  gramps_thumb_cache:

The config file:

TREE="MyFam"  # set the name of your family tree
SECRET_KEY="myActualSecretKeyOfProperLength" # set your secret key
BASE_URL="http://192.168.1.135:5053"
# do not change the following lines as they refer to paths within the container
USER_DB_URI="sqlite:////app/users/users.sqlite"
MEDIA_BASE_DIR="/app/media"
SEARCH_INDEX_DIR="/app/indexdir"
STATIC_PATH="/app/static"
CORS_ORIGINS="*"
DISABLE_AUTH="true"

The web api is working fine, well at least I hope. I say this because 192.168.1.135:5053/api/metadata/ and 192.168.1.135:5053/api/families/ as a test gives the correct JSON output.
However, the command:
gives me the following output: docker-compose logs --tail 150 gramps_webapi

gramps-webapi | [2021-10-24 20:29:54 +0000] [8] [INFO] Starting gunicorn 20.1.0
gramps-webapi | [2021-10-24 20:29:54 +0000] [8] [INFO] Listening at: http://0.0.0.0:5000 (8)
gramps-webapi | [2021-10-24 20:29:54 +0000] [8] [INFO] Using worker: sync
gramps-webapi | [2021-10-24 20:29:54 +0000] [11] [INFO] Booting worker with pid: 11
gramps-webapi | [2021-10-24 20:29:54 +0000] [12] [INFO] Booting worker with pid: 12
gramps-webapi | [2021-10-24 20:29:54 +0000] [13] [INFO] Booting worker with pid: 13
gramps-webapi | [2021-10-24 20:29:54 +0000] [14] [INFO] Booting worker with pid: 14
gramps-webapi | [2021-10-24 20:29:55 +0000] [15] [INFO] Booting worker with pid: 15
gramps-webapi | [2021-10-24 20:29:55 +0000] [16] [INFO] Booting worker with pid: 16
gramps-webapi | [2021-10-24 20:29:55 +0000] [17] [INFO] Booting worker with pid: 17
gramps-webapi | [2021-10-24 20:29:55 +0000] [18] [INFO] Booting worker with pid: 18
gramps-webapi | Unable to init server: Could not connect: Connection refused
gramps-webapi | Unable to init server: Could not connect: Connection refused
gramps-webapi | Unable to init server: Could not connect: Connection refused

  1. Cloned GrampsJS form your repo
  2. Followed the steps to npm install and npm start.

Here I am able to login, set the language and connect to the webapi as it recognises the DB. However, any other functions I click on the web page screenshot in the above post gives me a CORS error, even though I have allowed CORS from * in the webapi config file.

Hope this made sense.

Please check the “gramps_webapi” versions key in the JSON the metadata endpoint is returning.

Most importantly: which node.js, npm, browser versions, which OS?