Suggestions for solving the CORS problem

[qali]

Hi there,
First of all I’m not sure, but I strongly believe that, we getting CORS problem, due to differences between HOST and URLS.
I’m working to implement some MFE from Open edX, via plugins. I have been faced CORS header problem several times. In my opinion, if we can find solutions for rendering Api URLs, which is different from each other(see DISCOVERY_API_BASE_URL).I believe CORS problem will be solved.
It’s possible to EXPOSE to different PORTS with Plugins/Dockerfile, and Nginx, or .ENV files, but it’s mismatch to applications ORIGIN and URLs, I believe.

Here some examples from Frontend-app-publisher

Open edX development

NODE_ENV=‘development’
PORT=18400
BASE_URL=‘http://localhost:18400’
LMS_BASE_URL=‘http://localhost:18000’
STUDIO_BASE_URL=‘http://localhost:18010’
DISCOVERY_API_BASE_URL='http://localhost:18381’
LOGIN_URL=‘http://localhost:18000/login’
LOGOUT_URL=‘http://localhost:18000/logout’
CSRF_TOKEN_API_PATH=‘/csrf/api/v1/token’
REFRESH_ACCESS_TOKEN_ENDPOINT=‘http://localhost:18000/login_refresh’
ACCESS_TOKEN_COOKIE_NAME=‘edx-jwt-cookie-header-payload’
USER_INFO_COOKIE_NAME=‘edx-user-info’
SITE_NAME='edX

Tutor development

NODE_ENV=‘development’
PORT=18400
BASE_URL=‘http://local.overhang.io:18400’
LMS_BASE_URL=‘http://local.overhang.io:8000’
STUDIO_BASE_URL=‘http://studio.local.overhang.io:8000’
DISCOVERY_API_BASE_URL=‘http://discovery.local.overhang.io:8381’
LOGIN_URL=‘http://local.overhang.io:8000/login’
LOGOUT_URL=‘http://local.overhang.io:8000/logout’
CSRF_TOKEN_API_PATH=‘/csrf/api/v1/token’
REFRESH_ACCESS_TOKEN_ENDPOINT=‘http://local.overhang.io:8000/login_refresh’
ACCESS_TOKEN_COOKIE_NAME=‘edx-jwt-cookie-header-payload’
USER_INFO_COOKIE_NAME=‘edx-user-info’
SITE_NAME='edX
COURSE_CATALOG_API_URL=‘http://discovery:8381/api/v1’

Open edX production

NODE_ENV=‘production’
BASE_URL=null
LMS_BASE_URL=null
STUDIO_BASE_URL=null
DISCOVERY_API_BASE_URL=null
LOGIN_URL=null
LOGOUT_URL=null
CSRF_TOKEN_API_PATH=null
REFRESH_ACCESS_TOKEN_ENDPOINT=null
ACCESS_TOKEN_COOKIE_NAME=null
USER_INFO_COOKIE_NAME=null
SITE_NAME=null
NEW_RELIC_ADMIN_KEY=null
NEW_RELIC_APP_ID=null
NEW_RELIC_LICENSE_KEY=null

Tutor production

NODE_ENV=‘production’
PORT=18400
BASE_URL=‘http://mydomain.com:18400’
LMS_BASE_URL=‘http://mydomain.com’
STUDIO_BASE_URL=‘http://studio.mydomain.com’
DISCOVERY_API_BASE_URL=‘http://discovery.mydomain.com’
LOGIN_URL=‘MyDomain Login’
LOGOUT_URL=‘http://mydomain.com/logout’
CSRF_TOKEN_API_PATH=‘/csrf/api/v1/token’
REFRESH_ACCESS_TOKEN_ENDPOINT=‘http://mydomain.com/login_refresh’
ACCESS_TOKEN_COOKIE_NAME=‘edx-jwt-cookie-header-payload’
COURSE_CATALOG_API_URL=‘http://discovery:8000/api/v1’

[regis]

@qali I’m not sure I understand your question; but are you aware that I already published a working implementation of a MFE app as a Tutor plugin? https://github.com/overhangio/tutor-gradebook/

[qali]

Thanks for quick response @regis ,
Actually that’s was not a question, just want to share some experience, and suggestions about CORS problem
Yes I see tutor-gradebook/ And tried to use same code approach, for Frontend-app-publisher, but I didn’t managed to get .ENV files from plugin. And CADDY technology little bit new for me :). The big challenge for me to getting course catalog API from Discovery. Bacause Publisher is depends on Discovery… I will try that again… Thanks…

[qali]

Sorry abut, I don’t want to waste your time,
but here my example about CORS problem for Frontend-app-publisher plugin.

Before CORS Firefox extension:

And after Firefox CORS extensions:

[regis]

What is the LMS_HOST? The Access-Control-Allow-Origin header automatically set by Nginx in Tutor v10.2.2 will work only if the frontend app is located at a subdomain of the LMS.

[qali]

for this example LMS_HOST= minedx.site, and Publisher host= publisher.minedx.site

Header CORS settings:

[regis]

Right! Your issue is different than this other conversation. You are having issues connecting to the Discovery service, not the LMS. That means that the Discovery service should be setting “Access-Control-Allow-Origin” headers. Thus, what you need is for your plugin to patch the tutor/production.py and tutor/development.py settings from the tutor-discovery plugin: you should add there CORS_ORIGIN_WHITELIST.append("{{ PUBLISHER_HOST }}"), or something similar.

Unfortunately for you, the discovery settings do not include any {{ patch(...) } }} statement. So we would need to add some there.

So I just did that The new plugin will be published as tutor-discovery v10.1.7 in a few minutes and comes with a few patch statements that will allow you to extend the CORS_ORIGIN_WHITELIST setting: https://github.com/overhangio/tutor-discovery/commit/2da983c45848476868db191906e7d83bccad6678

[qali]

Thank you very much @regis