windows下Nginx+Tomcat部署Vue，解决访问后端api跨域访问错误

记录一下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中对前端和后端同时进行代理。