CORS problem when working with MFE template

[the_tan_Nguyen]

Hi everyone,

I’ve tried these steps to run MFE template (GitHub - openedx/frontend-template-application: A template repository for creating Open edX frontend applications. 💿➡️📀) in Dev mode with Tutor:

1. I follow this doc (GitHub - overhangio/tutor-mfe: This plugin makes it possible to easily add micro frontend (MFE) applications on top of an Open edX platform that runs with Tutor.) and then run tutor dev launch
2. The current env.development file of this MFE repo is for devstack so I changed the endpoints of this file to work with tutor dev:
   NODE_ENV='development' PORT=8080 ACCESS_TOKEN_COOKIE_NAME='edx-jwt-cookie-header-payload' BASE_URL='http://localhost:8080' STUDIO_BASE_URL='http://localhost:8001' LMS_BASE_URL='http://localhost:8000' CREDENTIALS_BASE_URL='http://localhost:1999' CSRF_TOKEN_API_PATH='/csrf/api/v1/token' ECOMMERCE_BASE_URL='http://localhost:18130' LANGUAGE_PREFERENCE_COOKIE_NAME='openedx-language-preference' LMS_BASE_URL='http://localhost:8000' LOGIN_URL='http://localhost:8000/login' LOGOUT_URL='http://localhost:8000/logout' LOGO_URL='https://edx-cdn.org/v3/default/logo.svg' LOGO_TRADEMARK_URL='https://edx-cdn.org/v3/default/logo-trademark.svg' LOGO_WHITE_URL='https://edx-cdn.org/v3/default/logo-white.svg' FAVICON_URL='https://edx-cdn.org/v3/default/favicon.ico' MARKETING_SITE_BASE_URL='http://localhost:8000' ORDER_HISTORY_URL='http://localhost:1996/orders' REFRESH_ACCESS_TOKEN_ENDPOINT='http://localhost:8000/login_refresh' DATA_API_BASE_URL='http://localhost:8000' SEGMENT_KEY='' SITE_NAME=localhost USER_INFO_COOKIE_NAME='edx-user-info' APP_ID='' MFE_CONFIG_API_URL=''

Unfortunately, I am facing CORS problem:

Can anyone help me with this. Thanks in advance.

[Syed_Muhammad_Dawoud (Syed Muhammad Dawoud Sheraz Ali)]

Hi. For some clarity:

1. Have you added the new MFE to tutor via plugin GitHub - overhangio/tutor-mfe: This plugin makes it possible to easily add micro frontend (MFE) applications on top of an Open edX platform that runs with Tutor.? Or are you running it outside docker and attempting to connect with docker containers?
2. Have you added the url to CORS_ORIGIN_WHITELIST setting in lms? Usually, this setting is needed so that the backend can process the request from the new client/app.

[the_tan_Nguyen]

Hi,
I really appreciate your reply.

1. I’ve added it to the local Docker, but now I am attempting to run it outside (for an easier development phase) and trying to communicate with Docker.

2. I think I did not add the URL to the CORS_ORIGIN_WHITELIST setting in LMS. May I ask how to find this file? Because what I did to run the Tutor Docker (both locally and in development) was:

pip install "tutor[full]"
tutor local(dev) launch

So, I don’t know where to set up CORS_ORIGIN_WHITELIST.

Again, thank you so much.

[Syed_Muhammad_Dawoud (Syed Muhammad Dawoud Sheraz Ali)]

Apologies, you don’t need to change CORS_ORIGIN_WHITELIST. It is handled by tutor-mfe internally (tutor-mfe/tutormfe/patches/openedx-lms-development-settings at master · overhangio/tutor-mfe · GitHub) . Can you tell the exact steps you took to set up new MFE?

[the_tan_Nguyen]

Hi @Syed_Muhammad_Dawoud ,

Glad that you asked,

Just to remind that I have successfully run the mfe with tutor local launch:

But it’s really painfull in the dev phase that I have to push the code to github master branch and rebuild the docker images just for small code change, so I have to figure out how to run it in dev.

So these are what I did to run in dev:

1. Launch the docker:
   pip install “tutor[full]”
   tutor dev launch
2. Change the .env.production file in this repo (GitHub - openedx/frontend-template-application: A template repository for creating Open edX frontend applications. 💿➡️📀) to communicate with the API inside the tutor dev docker, like what I mentioned in the first place.
3. npm start
   
   
   
   As you can see, I can load the Header, Footer component but missing the logo, and cannot login.

[Syed_Muhammad_Dawoud (Syed Muhammad Dawoud Sheraz Ali)]

Right. So you are not using tutor-mfe to add a new MFE but rather running an MFE outside the containers and trying to connect it to tutor LMS? If that is the case, then you need to add localhost:8000 to CORS_ORIGIN_WHITELIST. This is because you are not using tutor-mfe plugin, which handled the addition to cors_whitelist automatically.
To add localhost:8000 to cors whitelist, you would need a custom tutor plugin where you would add lms and cms patches (Modifying edx-platform settings — Tutor documentation)

[the_tan_Nguyen]

Hi everyone,

Many thanks to @Syed_Muhammad_Dawoud for his suggestion.

I’ve successfully added localhost:8000 to CORS_ORIGIN_WHITELIST.
This is how I do it:

1. Create plugin

2. Modify the content:

from tutor import hooks
hooks.Filters.ENV_PATCHES.add_item(
    (
        "openedx-cms-common-settings",
        'CORS_ORIGIN_WHITELIST.append("http://localhost:8080")'
    )
)


hooks.Filters.ENV_PATCHES.add_item(
    (
        "openedx-lms-common-settings",
        'CORS_ORIGIN_WHITELIST.append("http://localhost:8080")'
    )
)

3. Enable plugin

[the_tan_Nguyen]

One more,

You can see that, I did not sign up, but the content still load

So, I have something to ask:

1. How can I get the access token after I logged into LMS (I cannot found access token in the localhost):
   

If I can have the access token I can:

• Route guard
• Call API

2. How can I add a button into the tutor header to navigate to my custom page

Please help me if you have any idea on this.

[the_tan_Nguyen]

Also,

After bypassed the CORS, there is the /login_refresh that failed, how can I call it, this API is very important for me to get the current info, I have to call it.

You can see that, even if I have successfully logged in from the LMS but the avatar doesn’t appear, all because I failed to call /login_refresh api:

Please help me with this, it’s really important

[Syed_Muhammad_Dawoud (Syed Muhammad Dawoud Sheraz Ali)]

If you are logging in via LMS, it should automatically set the right session information in cookies.

If you are talking about JWT token especially, that is obtained from oauth2/access_token endpoint. But as far as I know, you don’t need to get that token for MFEs.

[the_tan_Nguyen]

Thanks for your reply,

When I run the mfe in Dev mode, I indeed have the cookies value:

But still, I cannot access /login_refresh

Also, what is the best practice for obtained the JWT, your suggestion oauth2/access_token endpoint is great but that’s means the user have to provide password again (one for logging to LMS, and one for my custom app):

Here is my env.development :

NODE_ENV='development'
PORT=8080
ACCESS_TOKEN_COOKIE_NAME='edx-jwt-cookie-header-payload'
BASE_URL='http://localhost:8080'
CREDENTIALS_BASE_URL=''
CSRF_TOKEN_API_PATH='/csrf/api/v1/token'
ECOMMERCE_BASE_URL='http://localhost:18130'
LANGUAGE_PREFERENCE_COOKIE_NAME='openedx-language-preference'
LMS_BASE_URL='http://local.edly.io'
LOGIN_URL='http://local.edly.io/login'
LOGOUT_URL='http://local.edly.io/logout'
LOGO_URL=https://edx-cdn.org/v3/default/logo.svg
LOGO_TRADEMARK_URL=https://edx-cdn.org/v3/default/logo-trademark.svg
LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg
FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico
MARKETING_SITE_BASE_URL='http://local.edly.io'
ORDER_HISTORY_URL='http://localhost:1996/orders'
REFRESH_ACCESS_TOKEN_ENDPOINT='http://local.edly.io/login_refresh'
SEGMENT_KEY=''
SITE_NAME=localhost
USER_INFO_COOKIE_NAME='user-info'
APP_ID=''
MFE_CONFIG_API_URL=''
ACCOUNT_SETTINGS_URL='http://apps.local.edly.io/account/'
ACCOUNT_PROFILE_URL='http://apps.local.edly.io/profile'
STUDIO_BASE_URL='http://studio.local.edly.io'
FAVICON_URL='http://local.edly.io/favicon.ico'
CHAT_BOT_URL = 'http://localhost:8000'

Again, thank you so much for your helping

[Vitika]

@the_tan_Nguyen I am facing the same problem you had (getting 401 when calling /login_refresh) Were you able to resolve that? If yes, could you please share your solution here? FYI, I am also running the MFE outside the docker container like you did by creating a tutor plugin.
Thanks

[Vitika]

@Syed_Muhammad_Dawoud maybe you can also help?

[the_tan_Nguyen]

hi Vitika,

1. No, I cannot resolve the 401 when calling /login_refresh when I run MFE outside tutor local. But if you integrate via tutor local launch then everything works.

2. But I understand you need a way for local dev so I have a way to work around.
   

   

• Line 32-43: is the data structure of the data when you local dev
• Line 29-30: is the real logic when you integrate your MFE to tutor local

[Vitika]

@the_tan_Nguyen I thought there could be a solution to this as I might require the user to be logged in for my use case. But as you said that the 401 won’t go away when running the MFE outside, then I can rely on your solution of hardcoding the things for development purpose. Thanks for your response, I really appreciate it!

[suigh (Rodrigo Suigh)]

hi guys, for development im facing this issue with login_refresh api too, and the way i used to fix it and continue fast development, i get the cookie in some edx logged page with document.cookie in browser console, and in my local mfe i paste the cookie
document.cookie = 'edx-jwt-cookie-header-payload=you_awesome_cookie'