"Invalid Host header" when accessing mfe in openedx tutor development

Site Operators Tutor Help
,
1

Hello, I’m new in Open edX and Tutor. I want to modify the discussion mfe, so I follow the MFE development from the tutor-mfe github

I already clone the frontend-app-discussions, mount the cloned mfe with:
tutor mounts add /path/to/frontend-app-discussions

install the node modules, start the mfe with: npm start
and launch the tutor dev with: tutor dev launch

When i access the discussions it showing “Invalid Host header” like tihs:

and this:

However, when i stop the npm start, i can see my modified mfe, but only for a while and it is only the view and i can’t interact with it (like make a new post):

my approach to solve this problem is to add this config in the webpack.dev-tutor.config.js (in my cloned mfe):

  1. Config 1:
    module.exports = {
    devServer: {
    headers: {
    “Access-Control-Allow-Origin”: “*”,
    },
    allowedHosts: [
    “local. edly. io”,
    “apps. local. edly. io”,
    “studio. local. edly. io”
    ],
    },
    };

  2. Config 2:
    devServer: {
    disableHostCheck: true,
    },

  3. Config 3:
    devServer: {
    public: ‘apps. local. edly. io’
    }

  4. Config 4:
    devServer: {
    allowedHosts: ‘all’,
    },

I also try to add DANGEROUSLY_DISABLE_HOST_CHECK=true in both of .env and .env.development file.

Sorry I can’t upload images in here because I’m new user, please access the images with gdrive.
Sorry I need to add space after the “.” in the config because it is detected as link, and new user only can have 5 links.
Please help me, I need this for my college project ASAP.
Thank You.

2

Nevermind, I re-install tutor and it works without error.