React应用无法通过自定义域名posts.com访问，但posts.com:3000可正常运行的原因及解决方法

Hey there! Let's break down what's going on here and walk through how to fix it. First, here's the hosts file you shared for reference:

Your Hosts File Configuration #

# Copyright (c) 1993-2009 Microsoft Corp.
#
# This is a sample HOSTS file used by Microsoft TCP/IP for Windows.
#
# This file contains the mappings of IP addresses to host names. Each
# entry should be kept on an individual line. The IP address should
# be placed in the first column followed by the corresponding host name.
# The IP address and the host name should be separated by at least one
# space.
#
# Additionally, comments (such as these) may be inserted on individual
# lines or following the machine name denoted by a '#' symbol.
#
# For example:
#
# 102.54.94.97 rhino.acme.com # source server
# 38.25.63.10 x.acme.com # x client host
# localhost name resolution is handled within DNS itself.
#	127.0.0.1 localhost
#	::1 localhost
127.0.0.1 posts.com
# Added by Docker Desktop
10.24.153.39 host.docker.internal
10.24.153.39 gateway.docker.internal
# To allow the same kube context to work on the host and the container:
127.0.0.1 kubernetes.docker.internal
# End of section

The Root Cause #

This boils down to how browsers and network ports work:

• When you type a domain like posts.com without a port, your browser automatically uses the default HTTP port (80) to establish a connection.
• Your React app is configured to run on port 3000 by default, not port 80.
• The hosts file only maps domain names to IP addresses—it doesn't handle port redirection or forwarding. So posts.com correctly points to 127.0.0.1, but your browser is looking for a service on port 80 there (which doesn't exist), hence the failure. Adding :3000 tells the browser to use the correct port where your app is running.

Two Fixes to Try #

Option 1: Run Your React App on Port 80 #

If you want to access posts.com without appending a port, start your React app on the default HTTP port (80). Here's how for common setups:

• Create React App:
  • Command Prompt (Windows):

    set PORT=80 && npm start
    

  • PowerShell (Windows):

    $env:PORT=80; npm start
    

  • Note: Running services on port 80 requires administrative privileges, so make sure you open your terminal as an Administrator.

Option 2: Set Up Port Forwarding on Windows #

If you prefer keeping your app on port 3000, you can forward traffic from port 80 to 3000 using Windows' built-in tool:

1. Open Command Prompt as Administrator.
2. Run this command to create the forwarding rule:

   netsh interface portproxy add v4tov4 listenaddress=127.0.0.1 listenport=80 connectaddress=127.0.0.1 connectport=3000
   

3. To confirm the rule is active, run:

   netsh interface portproxy show v4tov4
   

4. To remove the rule later (if needed):

   netsh interface portproxy delete v4tov4 listenaddress=127.0.0.1 listenport=80
   

After implementing either option, you should be able to load your React app by typing just posts.com in your browser.

内容的提问来源于stack exchange，提问作者GoodMan