通用的java web前后端分离项目中,一般建议前后端使用不同的域名访问。
比如我这里使用了两个测试域名,javag.com 和 face.javag.com(如果使用了spring cloud,也是可以跨域的比如face.javax.com)
我修改了Windows\System32\drivers\etc\hosts文件:记得用管理员权限打开记事本,再找到这个文件
127.0.0.1 javag.com
127.0.0.1 face.javag.com
还有nacos
127.0.0.1 nacos-host
javag给前端vue项目使用,而face.javag.com则给后端gateway网关统一分发给微服务使用。这样做的好处是前端项目可以做到和后端项目分开部署,互不影响。
在本项目中,我的vue项目监听了8001端口,而后端java springboot项目的网关监听了8080端口。
1. 首先, 如果想要通过域名访问,而不需要带上端口号的话,那就需要nginx来做前端代理,为什么呢?
因为不通过nginx代理的话,vue项目和java web项目同时监听一台机器的80端口是做不到的。
我们所以在nginx/conf/vhosts目录下增加两个配置,分别是 javag.com 和 face.javag.com,这么做的目的是转发javag.com到(8001端口) 和face.javag.com到vue和springboot项目(8080端口)。
分别如下:
face.javag.com_80.conf
server{
listen 80;
server_name face.javag.com;
location / {
proxy_pass http://127.0.0.1:8080; #nginx 接收到的80端口访问转发给 8080端口
proxy_set_header Host $proxy_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
access_log logs/face.javag.com_access.log;
}
javag.com_80.conf类似
2. 前端项目中,需要在vue.config.js文件中增加配置
disableHostCheck: true, #增加这一行,避免出现不允许域名访问 报错 Invalid Host header
port: 8001,
在public/index.html中修改访问的接口域名地址:
<!-- 开发环境 -->
<% if (process.env.VUE_APP_NODE_ENV === 'dev') { %>
<script>window.SITE_CONFIG['apiURL'] = 'http://face.javag.com';</script> #这一行
<% } %>
<!-- 集成测试环境 -->
<% if (process.env.VUE_APP_NODE_ENV === 'prod:sit') { %>
<script>window.SITE_CONFIG['apiURL'] = 'http://localhost:8080';</script>
<% } %>
3. 这样就可以通过域名访问前端和后端项目。
在这里没有问题的话算基本上解决了。
前端页面显示 javag.com界面,调用接口时访问 face.javag.com
由于在java后端项目中,我使用了nacos2.0.2做为我的微服务注册中心和管理中心,在本次项目中犯了一个低级错误,就是没有导入nacos的mysql数据库。在多次尝试过程中,会出现前端项目输入用户名密码后,后端返回 basic授权框,要求输入basic用户名密码,这里的原因是 后端gateway网关的auth服务没有正常工作。
下面列出nacos2.0初始化需要做的工作:
1. 配置Nacos的MySQL数据源,需要在application.properties文件末尾,新增如下配置:
spring.datasource.platform=mysql
db.num=1
db.url.0=jdbc:mysql://localhost:3306/nacos? characterEncoding=utf8&connectTimeout=1000&socketTimeout=3000&autoReconnect=true&useUnico
db.user=nacos # 这里是创建的nacos数据库
db.password=acba23423sdx #这里是mysql的密码
2. 新建数据库nacos,运行【nacos/conf/nacos-mysql.sql】文件即可
3. windows下启动 nacos :startup.cmd -m standalone
4. 导入nacos配置文件 :
common.yaml
datasource.yaml
gateway.json
之后依次运行后端微服务中的 gateway,auth,admin,monitor等服务,这样整个前后端项目就分别跑起来了。