Troubleshooting Local Testing Issues in iOS

A guide for solving known issues that you might face while testing your locally or privately hosted websites in iOS sessions using Live.

Note: This guide assumes you have completed local-testing setup and are in a local session, indicated by the “green” status icon on the Local Testing entry in the toolbar. Check Enable Local Testing with Live to learn how to enable a local session in Live.

Sometimes it may happen that although your localhost website is accessible on your local machine, it fails to resolve or load in a local-enabled iOS session in Live.

This issue can occur due some of the following common reasons:

Failure to redirect localhost to bs-local.com
Website hosted on an unsupported port
Hostname restrictions in local server configuration aka the Invalid host header issue

The following sections delve deeper into each of these cases.

Failure to redirect localhost to bs-local.com

Cause:

iOS restricts the resolution of localhost requests outside the device due to security reasons. Given this technical constraint on iOS devices, directly accessing the website hosted on your local machine through the localhost URL or via 127.0.0.1 is not supported in iOS sessions.

Any access to the localhost URL in iOS-Safari sessions is automatically redirected to bs-local.com which resolves to 127.0.0.1 as well and allows that request to be resolved on your local machine.

Though we try to ensure redirection, there may be intermittent cases where redirection fails. This redirection flow is also not supported in iOS-Chrome sessions.

Resolution:

You can try one of the following resolutions:

Use bs-local.com to access localhost website: To access localhost websites in iOS sessions, ensure that you replace localhost with bs-local.com in the URL. Though localhost is automatically redirected to bs-local.com in iOS-Safari sessions, verify that the URL uses bs-local.com in case redirection fails or in iOS-Chrome sessions.
Use your private IP address: Alternatively, you may also use the private IP address of your local machine to access the localhost URL. In this case, replace localhost with <private IP address> in the URL.

Website hosted on an unsupported port

Cause:

Due to technical constraints, iOS-Safari sessions in Live support only limited ports when testing your locally or privately hosted website. Hence, any local website hosted on an unsupported port would remain inaccessible in iOS-Safari sessions in Live.

Resolution:

Ensure that you use one of the supported ports to host your website. Check out the complete list of supported ports that you can use.

Hostname restrictions in local server configuration

Even after accessing the localhost website via the bs-local.com hostname in iOS on an unrestricted port, you may still see additional errors. This may be indicated by the browser’s error page or BrowserStack’s custom error page or a page with the message Invalid host header.

Cause:

This issue occurs when your local HTTP server (which hosts your locally-hosted website) disallows your localhost website to be accessed via the bs-local.com URL. When accessing your localhost website via bs-local.com, the browser includes the header hostname: bs-local.com with every request. In their default configuration, some servers block all HTTP(S) requests where this hostname header takes a value other than localhost.

Resolution:

Configure your server to accept requests from bs-local.com. The exact steps to do this differ based on the server you are using.

For some widely-used servers, such as development servers bundled in web-app frameworks, you may use the following configuration steps. If steps for your server are not listed below, refer to the documentation of the respective server.

By default, Angular does not allow the dev server to be accept requests from custom domain names (such as bs-local.com). It can be configured to do so using the following steps:

Kill the server and restart the same by running the following command:
```
ng serve --host bs-local.com
```
You should now be able to access your localhost website hosted on Angular’s dev server via bs-local.com

By default, Webpack does not allow the dev server to be accept requests from custom domain names (such as bs-local.com). Edit the webpack.config.js file of your server to accept custom domains using the following steps:

Using a text editor of your choice, open the webpack.config.js file and navigate to the devServer section

Add the following line of code under the devServer section of your webpack.config.js file:

devServer: {
 ...
 allowedHosts: 'all', // This  bypasses host checking
  }

Save the file and restart the server
You should now be able to access your localhost website hosted on Webpack’s dev server via bs-local.com

By default, Vue does not allow the dev server to be accept requests from custom domain names (such as bs-local.com). Edit the vue.config.js file to accept custom domains using the following steps:

Using a text editor of your choice open the vue.config.js file located in project directory. If you can’t find this file, create this in the root of your project directory.

Add the following lines of code to the file:

module.exports = {
  devServer: {
 disableHostCheck: true
  }
}

Save the file and restart the server
You should now be able to access your localhost website hosted on Vue’s dev server via bs-local.com

Did this page help you?

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked

This page has exactly what I am looking for
This content & code samples are accurate and up-to-date
The content on this page is easy to understand
Other (please tell us more below)

Any additional feedback?

Thank you for your valuable feedback

Is this page helping you?

Yes

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked

This page has exactly what I am looking for
This content & code samples are accurate and up-to-date
The content on this page is easy to understand
Other (please tell us more below)

Any additional feedback?

Thank you for your valuable feedback!