nginx 配置域名映射到本地IP

需求背景

项目需求需要在不同的域名下，判断展示不同的内容，为了模拟线上的正式域名，有以下几种方案：

方案一：

配置host:
1、找到host的文件地址（不会的百度）
2、配置host:

127.0.0.1  www.test.abc.com

3、如果你要使用www.test.abc.com访问，那么就需要修改项目中的端口号，改成80（默认端口）
4、如果不改端口，那么访问url就要加端口号
比如：项目端口号：9528 访问链接：www.test.abc.com:9528
5、这样访问是可行的，但访问会出现Invalid Host header问题
解决方案：
在vue.config.js或者webpack.dev.conf.js的devServer中添加disableHostCheck:true；
或者
historyApiFallback: true,
allowedHosts: “all”,
具体的解决方案根据自己的项目

方案二：

nginx配置

1、安装nginx自行安装（不会的百度）
2、找到nginx配置路径（conf等文件）
nginx.conf 修改两处

server_name: www.test.abc.com
 location / {
           proxy_pass http://127.0.0.1:9528;
        }

3、配置host: （如果是正式域名需要配置dns解析，这里只是个测试域名，所以要配置host才能生效）

127.0.0.1  www.test.abc.com

4、访问 www.test.abc.com，出现Invalid Host header问题按上述方案解决

方案三：

第三方工具：whistle

1、安装及启动whistle

安装

npm install -g whistle

启动

w2 start

2、安装证书

http://wproxy.org/whistle/webui/https.html

安装完证书，配置好规则，需要配置代理，W2 可以看设置代理

3、打开地址：http://127.0.0.1:8899/
配置规则：

www.test.abc.com 127.0.0.1:9528/

4、访问www.test.abc.com

以上三种方案都可以解决模拟正式域名映射到本地IP开发环境,进行测试。