Keywords: HTTP 400 | firewall | IIS binding | Visual Studio
Abstract: This article details the solution for the "Bad Request- Invalid Hostname" HTTP error 400 encountered when trying to access localhost from a mobile device via WiFi. The core solutions involve configuring Windows firewall inbound rules and adjusting IIS or IIS Express bindings. Step-by-step instructions are provided for adding firewall rules, modifying IIS Manager bindings, and updating IIS Express configuration files, with additional advice for Visual Studio users, such as running as administrator to avoid permission issues. By following these steps, developers can successfully preview web layouts on mobile devices.
Problem Overview
In mobile web development, developers often need to preview webpage layouts on mobile devices to fit screen sizes. However, when accessing localhost from a phone via WiFi, an HTTP error 400 may occur, indicating "Bad Request- Invalid Hostname". This error typically stems from incorrect server binding settings or firewall blocking, preventing external devices from properly recognizing the hostname.
Solution Overview
Resolving this issue primarily involves two core configurations: Windows firewall inbound rules and IIS (or IIS Express) bindings. By correctly setting these up, external devices can access the local server, thereby eliminating the HTTP 400 error.
Configuring Windows Firewall Inbound Rules
First, ensure the firewall allows TCP connections on specific ports. Steps are as follows:
- Open "Windows Firewall with Advanced Security".
- In the left panel, right-click on "Inbound Rules" and select "New Rule".
- For rule type, choose "Port", select "TCP" for protocol, and specify the local port number (e.g., 57976).
- Choose "Allow the connection" for action, and tick all profiles (Domain, Private, Public).
- Name the rule and finish.
This step ensures that external devices can connect to the specified port, avoiding firewall blockage.
Configuring IIS or IIS Express Bindings
Secondly, the server needs to bind to an external IP address rather than just localhost. The configuration method differs based on whether IIS or IIS Express is used.
For IIS Manager
- Open IIS Manager.
- In the left panel, navigate to "Sites" > "Default Web Site".
- In the right panel, click on "Bindings".
- In the pop-up dialog, click "Add", and input the port number and hostname (i.e., external IP address, such as 192.XXX.XXX.XXX).
For IIS Express (Visual Studio)
Configuring IIS Express requires modifying configuration files. First, determine the file location:
- For Visual Studio 2015 and later versions, the file is located in the project folder at
.vs\config\applicationhost.config. - For earlier versions, the file is at
C:\Users\<username>\Documents\IISExpress\config\applicationhost.config.
In the applicationhost.config file, search for the used port number and add a binding with the hostname set to the external IP address. For example:
<site name="Web(1)" id="9">
<application path="/" applicationPool="Clr4IntegratedAppPool">
<virtualDirectory path="/" physicalPath="E:\abc\project\dev\web" />
</application>
<bindings>
<binding protocol="http" bindingInformation="*:57976:localhost" />
<binding protocol="http" bindingInformation="*:57976:192.XXX.XXX.XXX" />
</bindings>
</site>
Note that in the configuration file, ensure proper XML formatting to avoid syntax errors. In practice, it is recommended to back up the file before editing.
Special Case for Visual Studio
For Windows 10 or Visual Studio 2015 users, you might encounter the error "Unable to launch the IIS Express Web server, Failed to register URL, Access is denied". The solution is:
- Close Visual Studio.
- Right-click on the Visual Studio icon and select "Run as administrator".
This resolves permission issues, ensuring IIS Express properly registers the URL.
Summary
By following these steps, developers can successfully configure the system to allow mobile devices to access localhost via WiFi. The key points involve setting both firewall rules and server bindings. Regularly check for IP address changes, as dynamic IPs may require updates to binding settings. This method is applicable to most web development scenarios, aiding in mobile layout previews and enhancing development efficiency.