Day06_商品分类(vuetify-nginx-cors)与品牌查询 (3)

浏览器会首先在本机的hosts文件中查找域名映射的IP地址,如果查找到就返回IP ,没找到则进行域名服务器解析,一般本地解析都会失败,因为默认这个文件是空的。

Windows下的hosts文件地址:C:/Windows/System32/drivers/etc/hosts

Linux下的hosts文件所在路径: /etc/hosts

MacOS下的hosts文件地址:/etc/hosts

样式:

# My hosts 127.0.0.1 localhost

域名服务器解析

本地解析失败,才会进行域名服务器解析,域名服务器就是网络中的一台计算机,里面记录了所有注册备案的域名和ip映射关系,一般只要域名是正确的,并且备案通过,一定能找到。

3.3.解决域名解析问题

我们不可能去购买一个域名,因此我们可以伪造本地的hosts文件,实现对域名的解析。修改本地的host为:

127.0.0.1 api.leyou.com 127.0.0.1 manage.leyou.com

这样就实现了域名的关系映射了。

每次在C盘寻找hosts文件并修改是非常麻烦的,给大家推荐一个快捷修改host的工具,在课前资料中可以找到:

Day06_商品分类(vuetify-nginx-cors)与品牌查询

解压,运行exe文件,效果:

Day06_商品分类(vuetify-nginx-cors)与品牌查询

我们添加了两个映射关系(中间用空格隔开):

127.0.0.1 api.leyou.com :我们的网关Zuul

127.0.0.1 manage.leyou.com:我们的后台系统地址

现在,ping一下域名试试是否畅通:

Day06_商品分类(vuetify-nginx-cors)与品牌查询

OK!

通过域名访问:

Day06_商品分类(vuetify-nginx-cors)与品牌查询

原因:我们配置了项目访问的路径,虽然manage.leyou.com映射的ip也是127.0.0.1,但是webpack会验证host是否符合配置。

Day06_商品分类(vuetify-nginx-cors)与品牌查询

在webpack.dev.conf.js中取消host验证:disableHostCheck: true

Day06_商品分类(vuetify-nginx-cors)与品牌查询

重新执行npm run dev,刷新浏览器:

Day06_商品分类(vuetify-nginx-cors)与品牌查询

OK!

3.4.nginx解决端口问题

域名问题解决了,但是现在要访问后台页面,还得自己加上端口::9001。

这就不够优雅了。我们希望的是直接域名访问:。这种情况下端口默认是80,如何才能把请求转移到9001端口呢?

这里就要用到反向代理工具:Nginx

3.4.1.什么是Nginx

Nginx是一个高性能的Web和反向代理服务器,它具有很多非常优越的特性:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zzfdsz.html