Invalid Host header

[Kreyren]

🐛 bug report

Description of the problem

I seem to have same/similar issue to #2233 on commit 7753555

Diagnosed the issue to be triggered on

  setupCheckHostRoute() {
    this.app.all('*', (req, res, next) => {
      if (this.checkHost(req.headers)) {
        return next();
      }

      res.send('Invalid Host header');
    });
  }

Which is located in node_modules/webpack-dev-server/lib/utils/Server.js after yarn && yarn build suspecting change in dependency that broke the runtime

How has this issue affected you? What are you trying to accomplish?

Affects testing of a new contribution

Link to sandbox: link (optional)

Codesandbox doesn't support changes in codesandbox (https://codesandbox.io/s/github/codesandbox/codesandbox-client).

Configured gitpod on https://github.com/Kreyren/codesandbox-client/tree/84e0aece9aa6abc8bf5bf5f81493cc6bbd0f34a3 (takes around 5 min to set up since the build is not yet cached due to pebcak(?) gitpod-io/gitpod#1138)

Your Environment

• Software: GitPod
• Browser: Mozilla/5.0 (X11; Linux x86_64; rv:68.0) Gecko/20100101 Firefox/68.0
• Operating System: Kreyrock Linux Anubis 9999 x86_64 (Bedrock-inspired franken-kernel system from scratch with experimental Zernif package manager) - Same issue on Debian Linux using different device

[lbogdan]

Hey @Kreyren ,

You probably need to set https://webpack.js.org/configuration/dev-server/#devserverdisablehostcheck . We're all working on localhost, that's why we never had this issue.

[lbogdan]

Will close this for now, as there's no actionable item here. If you need further assistance in setting up your development environment, you can find us on Spectrum.

[skygreenman]

For those using Webpack 5, use allowedHosts instead of disableHostCheck.
See Stack Overflow response and Webpack documentation

Example:

// webpack.config.js
//...
module.exports = {
//...
  devServer: {
     allowedHosts: ['.preview.csb.app'] // <  Copy and paste the domain from the URL Codebox provides for your runtime here
  },
};

[Blackwell805]

Situation
I was getting this same error while using codesandbox.io.
I created a new cloud sandbox for a Vue3 project.

After seeing this solution, I tried it but creating a new file webpack.config.js.
Didn't work.

I changed the file name to vue.config.js. Restarted the sandbox.
worked.

EXPLANATION
If there is a webpack.config.js file present, Vue CLI will use that instead, but it can sometimes cause conflicts or issues if the configuration is not compatible with Vue CLI.

By default, Vue CLI looks for a file named vue.config.js in the root of the project directory to configure its build process.

By renaming the file to vue.config.js, we are ensuring that Vue CLI will use the correct configuration file and that there are no conflicts with the build process.

My code:

module.exports = {
  // disable the host check on sandbox
  devServer: {
    disableHostCheck: true
  }
};

[silence1018]

Situation I was getting this same error while using codesandbox.io. I created a new cloud sandbox for a Vue3 project.

After seeing this solution, I tried it but creating a new file webpack.config.js. Didn't work.

I changed the file name to vue.config.js. Restarted the sandbox. worked.

EXPLANATION If there is a webpack.config.js file present, Vue CLI will use that instead, but it can sometimes cause conflicts or issues if the configuration is not compatible with Vue CLI.

By default, Vue CLI looks for a file named vue.config.js in the root of the project directory to configure its build process.

By renaming the file to vue.config.js, we are ensuring that Vue CLI will use the correct configuration file and that there are no conflicts with the build process.

My code:

module.exports = {
  // disable the host check on sandbox
  devServer: {
    disableHostCheck: true
  }
};

Great, solved my problem, but I still don't understand what this cloud is for

[Alexei87K]

module.exports = {
  // disable the host check on sandbox
  devServer: {
    disableHostCheck: true
  }
};

it didn't work for me... I also use codesandbox

[rostik32]

module.exports = {
  // disable the host check on sandbox
  devServer: {
    disableHostCheck: true
  }
};

it didn't work for me... I also use codesandbox

same with me

[Arthur-1702]

module.exports = {
  // disable the host check on sandbox
  devServer: {
    disableHostCheck: true
  }
};

it didn't work for me... I also use codesandbox

After tried those solutions and none worked for me, I found this:

In webpack 5 is changed, please check:

 devServer: {
    allowedHosts: 'all',
 }

[CompuIves]

I will make sure to also create a documentation page about this, as it's a problem that happens more frequently.

disableHostCheck or allowedHosts: 'all' should both work. If you want something more specific than 'all', then '.csb.app' should also work, and that domain won't change any time.

[Sovai]

does not work after I use the new AI feature

[manusoftar]

Hey @Kreyren ,

You probably need to set https://webpack.js.org/configuration/dev-server/#devserverdisablehostcheck . We're all working on localhost, that's why we never had this issue.

What does that have to do anyway, CodeSandBox is an online service, we shouldn't need to be setting things up anyway... When I log on CodeSandBox.io and generate a devbox I expect it to work out of the box, not to start erroring with these kind of things. Is it that hard to just fix the God damn thing??!