Backend py4web API Setup and CORs

[nmacneil]

Hi folks,

It took quite a few attempts to get CORs working locally using py4web as my backend for standard & Auth API requests, so I wanted to list out how I finally got it working for others to bypass my pain.

Steps:

1. If developing locally you'll need to setup front and backend to use https.
   
   
2. Backend:
   • In your common.py:
   1. 1. Add CORS fixture: from py4web.utils.cors import CORS # set the origin to where ever your frontend server is running, # use host and port rather than "localhost" as the browser session # cookies may not be set otherwise preventing auth usage. # headers="Content-Type" is required to prevent a different CORs browser issue. cors = CORS(origin='https://127.0.0.1:8080', headers="Content-Type")
      2. Update session fixture: # setting same_site="None" allows the cookie to be set cross-origin, # since your frontend has a different origin than your backend. # You'll need to be running https or the "secure" flag won't be set on cookies # and will be ignored by the browser when returned in the response (Step 1 above).

         session = Session(secret=settings.SESSION_SECRET_KEY, same_site="None")
      3. Update auth fixtures:
         # Set cors as the first fixture via inserting into the front of the auth 
         # prerequisites, otherwise the preflight options request will fail since 
         # the browser doesn't send the session cookie for those requests
         # and the other auth prerequisites are prepended resulting in a 
         # "user not logged in" error when updating auth profile for example.
         

         auth.__prerequisites__.insert(0, cors) # CORs must be first fixture or OPTIONS requests will fail for logged in auth calls.

         
         
      4. Add cors to your other convenience decorators:
         

         unauthenticated = ActionFactory(cors, db, session, T, flash, auth)

         authenticated = ActionFactory(cors, db, session, T, flash, auth.user)
3. Frontend:
   • Dependent on your setup, but high-level you'd need your frontend running https (same as above).
     • I'm using vue3 with quasar, so I configure the quasar/webpack devserver as the following:
       
       
           devServer: {

             server: {

               type: "https",

               options: {

                 key: "C:/Users/some_user/Documents/Projects/localkeys/cert/CA/localhost/localhost.decrypted.key",

                 cert: "C:/Users/some_user/Documents/Projects/localkeys/cert/CA/localhost/localhost.crt",

               },

             },

             host: "127.0.0.1",

             port: 8080,

             open: {

               app: {

                 name: open.apps.chrome,

                 arguments: ["--incognito"],

               },

             }
   • For your frontend request client it would vary but using axios as an example you would need the following:
     
     // Base axios config setup. // "withCredentials" is important to ensure your cookies are sent cross-origin // (frontend to backend).
     
     const config = {

       baseURL: "https://127.0.0.1:8000/some_application/", // your py4web backend URL

       withCredentials: true,

     };

     
     

     const _axios = axios.create(config);
   
   

You should now be able to make requests for local front/backend development without CORs errors. Additional setup may be required for deployment, but this should get you most of the way setup.

- Nathan

[Kevin Keller]

Could you share the code of one of your controllers that has all the fixtures applied in the right way please?

I think that woukd help as well. 

Thanks for sharing. This is very useful. 

We shoukd add it to the docs. 

--
You received this message because you are subscribed to the Google Groups "py4web" group.
To unsubscribe from this group and stop receiving emails from it, send an email to py4web+un...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/py4web/3deb8608-feb8-49a4-a7b0-e11536a64732n%40googlegroups.com.