How to access my PC localhost AND internet with my iPhone? - iphone

Question

My Windows 10 pc has xampp installed. I use it for multiple projects so my folder structure is similar to:
xampp
|-htdocs #dummy localhost
|-htdocs-projecta
|-htdocs-projectb
|-etc
I have set up my http-vhosts.conf file and hosts file so that when I go to projecta.dev or projectb.dev then apache returns the correct website.
I have set up my pc to act as a wifi hotspot and connected my iphone to the hotspot. I have configured the wifi connection on my iphone so that my pc acts as a proxy. This means when I go to projecta.dev on my phone I can see the website from my computer.
This is where I am having problems - using this method it appears I can ONLY see websites that are on my computer (ie I am unable to download resources from other websites - such as jQuery or Analytics).
How can I set up my PC and iPhone so I can access the local project domains on my pc from my iphone, as well as having regular internet access to download other scripts?
[edit]
More info:
My vhosts file is configured like this:
<VirtualHost *:80>
DocumentRoot "C:\xampp\htdocs\"
ServerName localhost
<Directory C:\xampp\htdocs>
AllowOverride All
Require all granted
</Directory>
</VirtualHost>
<VirtualHost *:80>
DocumentRoot "C:\xampp\htdocs-projecta\public_html"
ServerName projecta.dev
<Directory C:\xampp\htdocs-projecta>
AllowOverride All
Require all granted
</Directory>
</VirtualHost>
<VirtualHost *:80>
DocumentRoot "C:\xampp\htdocs-projectb"
ServerName projectb.dev
<Directory C:\xampp\htdocs-projectb>
AllowOverride All
Require all granted
</Directory>
</VirtualHost>
...
And my hosts file is:
127.0.0.1 projecta.dev
127.0.0.1 projectb.dev
...
When I access project-a.dev from my phone, it loads the website excluding third-party resources (such as Google Fonts and jQuery). When I go to Google it loads my localhost, with other pages / folders returning a 404. This led me to think the issue is with the vhosts configuration - it can't find a matching server name and is loading the default localhost.
So I changed <VirtualHost *:80> to <VirtualHost projecta.dev:80> but that had no effect. I also added Listen projecta.dev:80 but that also had effect.
How do I set up vhosts to ignore all requests that but those in the vhosts file / with ServerNames?

Answer 1

First, you may check whether your iPhone able to connect to any website or not after you connect to the wifi hotspot, e.g. www.google.com
If yes and you still unable to connect, you may check whether the link of the jquery script is correct or not by try on your laptop. If there having the same problem with your phone, then you inspect element and check whether the script successful download or not. Sometimes, we may put the jquery link wrongly.
If all are ok but the iPhone still cannot download it, I think you may download those jquery script and put into the htdoc folder together with your project. Actually this way can save a lots of time.
Hope this can help you!

Answer 2

I had set up my iphone to have a proxy connection to my pc for ALL requests.
What I had to do was create a .pac file on my pc so, on a per-request basis, it would tell my iphone whether to access my pc as a proxy or connect directly to the resource.
Here is my proxyfile.pac:
function FindProxyForURL(url, host)
{
//localhost projects
if (dnsDomainIs(host, "projecta.dev")) return "PROXY 192.168.1.87:81";
if (dnsDomainIs(host, "projectb.dev")) return "PROXY 192.168.1.87:82";
//... etc
//everything else
return "DIRECT";
}
As you can see, I am now telling my iphone to use my computer to proxy specific urls to different ports on the same ip. If I set it to port 80, then they would all access my default localhost instead of the website they are supposed to load. This meant I had update my vhosts file as well:
<VirtualHost *:80>
DocumentRoot "C:\xampp\htdocs-projecta\public_html"
ServerName projecta.dev
<Directory C:\xampp\htdocs-projecta>
AllowOverride All
Require all granted
</Directory>
</VirtualHost>
Listen 81
<VirtualHost *:81>
DocumentRoot "C:\xampp\htdocs-projecta\public_html"
ServerName projecta.dev
<Directory C:\xampp\htdocs-projecta>
AllowOverride All
Require all granted
</Directory>
</VirtualHost>
For each project, I copy/paste the VirtualHost block, change the port and add a Listen command.
With this set up I am now able to access, on my pc and iphone http://projecta.dev, as well as the internet in general (e.g. http://google.com) so that I can download external resources as needed (such as jQuery, google fonts and so on).