windows下Nginx+Tomcat部署Vue，解决访问后端api跨域访问错误
windows下Nginx+Tomcat部署Vue，解决访问后端api跨域访问错误
- vue-vben-admin 项目的一些配置
- 部署到Tomcat
- Nginx解决跨域访问错误
- 致谢
记录一下vue-vben-admin开源项目需要注意的地方，方便以后快速使用。
使用前后端分离方式部署项目。
vue-vben-admin 项目的一些配置
需要重点关注一下几个文件的内容：
系统配置文件：
.env
# 运行端口
VITE_PORT = 3100
# 配置项目名称
VITE_GLOB_APP_TITLE = Vben Admin
开发环境的配置文件 .env.development
# 是否开启mock模式，设置为
VITE_USE_MOCK = false
# 解决开发环境的跨域访问 VITE_USE_MOCK=false 生效
VITE_PROXY=[["/webproject-api","http://192.168.1.109:8081/webproject"]]
# 控制台输出是 "http://192.168.1.109:3100/webproject-api/user/login"
# 但实际请求是 "http://192.168.1.109:8081/webproject/user/login"
# 配合VITE_PROXY使用，自动把/webproject-api拼接到所有的请求前，达到后端请求的转发
VITE_GLOB_API_URL = /webproject-api
生产环境部署配置文件 .env.production
VITE_USE_MOCK = false
# 公共资源路径，可以理解成 项目名 ，必须以/开始结束
VITE_PUBLIC_PATH = /vueproject/
# 后台接口转发 同开发环境
VITE_GLOB_API_URL = /webproject-api
前台ajax请求配置文件（defHttp相关配置）： src\utils\http\axios\index.ts
//配置了对后台请求返回的处理方式。 后台返回：{code，result，message}
//默认只返回数据{result}. 若想无处理返回，即返回{code，result，message}
//需要设置 isTransformResponse = false.
transformRequestHook:(){}
// function createAxios() 中只需要关注一个 baseURL 配置,
//这和nginx转发后端请求息息相关。如下端口配置，nginx监听端口也要设置是8888
baseURL:'http://192.168.1.109:8888',
用户登录相关说明：src\api\sys\user.ts
enum Api {
Login = '/user/login',
}
export function loginApi(params: LoginParams, mode: ErrorMessageMode = 'modal') {
// 当前直接返回后台返回的result,忽略code，message，
// isTransformResponse默认为true 仅返回result
// defHttp.options.requestOptions.isTransformResponse=false
const response = defHttp.post<LoginResultModel>(
{
url: Api.Login,
// 自动拼接到 VAxios.baseURL + env.development.VITE_GLOB_API_URL 后
// 即请求URL是：http://192.168.1.109:8888/webproject-api/user/login
params,
},
{
errorMessageMode: mode,
},
);
// defHttp.options.requestOptions.isTransformResponse=true
return response
}
到此，针对vue-vben-admin的改造基本完成。然后使用命令 yarn build
等命令执行结束就可在/dist目录下得到，前端生成的静态文件。
部署到Tomcat
因为在生产环境配置文件中 .env.production 中 设置了公共资源名称
VITE_PUBLIC_PATH = /vueproject/
所以在 Tomcat/webapps/ 下创建同名文件夹 /vueproject，然后将 /dist 目录下的文件拷过去。
然后启动Tomcat。 部署在8080端口。
此时访问 http://localhost:8080/vueproject/ 可正常进入项目的登录页面，则以上内容设置正确。
但是此时点击登录会发现出现跨域访问错误。
Nginx解决跨域访问错误
windos解压版 稳定版 nginx 下载
将其加压到需要安装的位置即可。
最好修改完配置文件后运行。
配置文件修改：conf/nginx.conf
不考虑其他配置可直接将nginx.conf 替换为以下内容：
worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
server {
# nginx监听端口
listen 8888;
server_name localhost;
# 前台页面地址
location /vueproject {
proxy_pass http://192.168.1.109:8080/vueproject/;
}
# 后端接口代理，用于解决跨域问题
location /webproject-api {
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
# 后台接口地址
proxy_pass http://192.168.1.109:8081/webproject/;
proxy_redirect default;
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Headers X-Requested-With;
add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
}
}
}
需要注意的地方就是： server 内容里的 listen、location、proxy_pass
listen 8888 就是nginx监听的端口此处为8888，
location /vueproject
前台页面转发地址。然后访问前端页面就不用访问 http://localhost:8080/vueproject/
只需访问：http://192.168.1.109:8888/vueproject/
ngnix监听到8888端口，出现访问 /vueproject/**
然后交付给 location /vueproject
最终转发到地址：http://192.168.1.109:8080/vueproject/
同时前端发生的api请求都是以 http://192.168.1.109:8888/webproject-api/** 形式进行的
因此会将其转发给 http://192.168.1.109:8081/webproject/ 处理
虽然请求看似请求的URL为 http://192.168.1.109:8888/webproject-api/user/login
但是转发后的路径URL为 http://192.168.1.109:8081/webproject/user/login
也可直接双击 nginx.exe。修改完配置文件后，在安装目录打开cmd窗口输入下面代码刷新配置
nginx -s reload
到此成功解决vue部署跨域访问的问题。
致谢
感谢@冷歌提供的参考文章
仔细研究并尝试成功之后，记录出错的原因。
之前只配置了后端api的nginx代理（8888），前端只发布在Tomcat（8080）中，通过地址栏访问代理api测试成功，但是从tomcat中访问仍然是跨域，因为刚接触nginx，完全不懂，所以不知道哪里出的问题。
在朋友的提醒下才知道，8080端口已经被Tomcat占用，即使nginx配置了listen 8080，仍然不起作用，nginx只监听未被占用的端口。
所以需要在nginx中对前端和后端同时进行代理。