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

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值