full-stack-fastapi-template

full-stack-fastapi-template copied to clipboard

I am unable to login to the vue js dashboard, and the console reads Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost/api/v1/login/access-token. (Reason: CORS request did not succeed). . I did try changing cors on main.py.

I think this issue is arising because i am developing on a remote machine and I am accessing it via its public IP and not a domain name, and the console message tells that the remote resource at localhost was inaccessible. The application is currently the default cookiecutter config, with the only change being in main.py cors. I tried changing the allow origin to ['*'],[] and removing it altogether too!

Any pointers in fixing this would be of great help, thanks in advance!

Have you solved this problem?

Nope, not so far.

Similar problem here, except the error is: Failed to load resource: Could not connect to the server. http://localhost/api/v1/login/access-token

I have set my DNS, say demo.hernan.prof, to point to the public IP. I've also changed .env and frontend/.env setting DOMAIN=demo.hernan.prof, BACKEND_CORS_ORIGINS=[..., 'http://demo.hernan.prof'] and VUE_APP_DOMAIN_DEV='demo.hernan.prof'. I didn't modify main.py.

I'm able to log in through /docs and, for instance, add users via api. By the way, the project name generated when running the cookiecutter is not demo.hernan.prof.

Pretty sure I'm missing something obvious. Any tips will be appreciated, thanks!

Fixed mine. I needed to rebuild the frontend image: docker-compose build frontend.

On the backend you should list the Backend Host on CORS middleware on the FastAPI instance.

Example:

My front end address: http://localhost:8080 (local address, wont likely used on production), https://frontend.example.com

Then i add the Address to my BACKEND_CORS_ORIGINS which is on

backend/app/app/core/config.py

   ...
   BACKEND_CORS_ORIGINS: List[AnyHttpUrl] = ['http://localhost:8080', 'https://frontend.example.com']
   ...

Or on the production server

   ...
   BACKEND_CORS_ORIGINS: List[AnyHttpUrl] = ['https://frontend.example.com']
   ...

settings.py On the repo

More information about the CORS configuration: CORS on FastAPI Docs

@hfoffani I have had a very very similar issue, but I still can't correct the "localhost" to point to domain name. I don't have a sub-domain setup (yet).

I'm interested in your reply when you said "I've also changed .env and frontend/.env setting DOMAIN=demo.hernan.prof, BACKEND_CORS_ORIGINS=[..., 'http://demo.hernan.prof'] and VUE_APP_DOMAIN_DEV='demo.hernan.prof'. "

For the backend cors origins line, is that the ending variable of the whole thing or did you set the cors origins to just that one CORS variable?

I should note that when I do docker-compose build frontend within the appnamefolder, it spits out some interesting lines and never finishes. The lines look like they're trying to serve pages or build pages. Not sure. I don't have docker swam enabled or Traefik configured/running.

For the backend cors origins line, is that the ending variable of the whole thing or did you set the cors origins to just that one CORS variable?

In BACKEND_CORS_ORIGINS by the three dots I meant to say to append the original content. I've also added the public IP, just for the sake of it.

I always run docker-compose in the top directory. I didn't have time to try swarm nor Traefik either. Right now I'm working with the browsing either pointing to localhost, demo.hernan.prof, the hardwired public IP, or to localhost:8080 with the dev npm server.

Actually, the only working solution is the following:

• Edit the front/.env file
• Change the VUE_APP_DOMAIN_DEV=[your desired domain] instead of the [localhost]
• Rebuild the frontend: $ docker-compose build frontend
• dock-compose up