前后分离 nginx跨域 nginx vue前后端分离

文章目录

• 写在前面
• 安装Nginx
• 打包VUE项目
• 配置nginx

• 记录一个错误

写在前面

博客为工作小记。
现在前后端分离的项目，关于前端的部署，主要有两种方法：

1. 打包后直接放在Spring boot的static文件夹下
2. 打包后用Nginx进行部署与接口转发

废话警告
为什么要采用第二种方式呢？个人看法：前后端分离的最简单、直接目的就是——前后端分别开发。1所述的方式虽然也是分别开发的，但是部署的时候还是把编译后的文件放到了后端代码里，然后后端再打包，使得后端有些“臃肿”。虽然这种方式比较简单，但我个人觉得，其实是违反了前后端分离的本意。并且使用Nginx来部署可以带来Nginx自身的一些负载均衡等优势，是企业级开发的标准选择。

安装Nginx

随便写点，安装过程不是很重要。

官网下载一个稳定版本。官网链接.

下载后随便解压放在一个地方即可，比如桌面。

然后几条常用命令，先cd到nginx的更目录。

1.启动nginx

start nginx

2.关闭nginx

nginx -s quit

3.重载配置（已经启动的情况下，修改了配置，执行命令。当然，你可以关了重开）

nginx -s reload

打包VUE项目

在webstorm的terminal内运行

npm run build

完成后会生成一个编译好的dist文件夹，里面包含了img、css、html等文件。

配置nginx

目的：

1. 部署打包后的静态资源。
2. 反向代理，将前端的请求转发到后端。

一个demo:

server {
		# 需要被监听的端口号，前提是此端口号没有被占用，否则在重启 Nginx 时会报错
		listen       8888;
		# 服务名称，无所谓
		server_name  localhost;

		# 打包好的VUE项目
		root C:\Users\lenovo\Desktop\dist;
		# 项目根目录中指向项目首页
		index index.html;

		client_max_body_size 20m; 
		client_body_buffer_size 128k;

		# 根请求会指向的页面
		location / {
		  # 此处的 @router 实际上是引用下面的转发，否则在 Vue 路由刷新时可能会抛出 404
		  try_files $uri $uri/ @router;
		  # 请求指向的首页
		  index index.html;
		}
		# 由于路由的资源不一定是真实的路径，无法找到具体文件
		# 所以需要将请求重写到 index.html 中，然后交给真正的 Vue 路由处理请求资源
		location @router {
		  rewrite ^.*$ /index.html last;
		}
		#配置请求转发
		#注意地址里的几个"/"，"http://localhost:8888/api/"转发到"http://localhost:8023/"
		location /api/ {
			  # 后端的真实接口
			  proxy_pass http://localhost:8023/;
			  proxy_redirect off;
			  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_set_header   Cookie $http_cookie;
		}
	}

记录一个错误

中途调试的时候，发生了这样一个问题：在开发环境中毫无问题，但是打包在nginx上部署后，有部分接口在访问时爆出：We’re sorry but mobile doesn’t work properly without JavaScript enabled. Please enable it to continue
在网上查了查，也仔细比对了一下代码，发现问题如下啊：

//修改前
getRequst('aop_logout').then(resp=>{
    console.log(resp);//打印返回消息，内容即为上述的报错
    getRequst('logout');
});
//修改后，加了"/"
getRequst('/aop_logout').then(resp=>{
    console.log(resp);
    getRequst('/logout');
});
// 这是配置的axios方法，可以很明显的看出少了"/"会出现字符串拼接错误，但为什么开发环境下正常运行就不知道了
export const getRequst=(url,params)=>{
    return axios({
        method:'get',
        url:'/api'+url,
        data:params,
    })
};

所以请求其实根本没到达后端，所以后端的响应代码也没有执行。