乐趣区

Nginx入门及如何反向代理解决生产环境跨域问题

1.Nginx 入门与基本操作篇
注:由于服务器是 windows 系统,所以本文主要讲解 Nginx 在 windows 下的操作。

首先下载 Nginx

解压缩,我们所有的配置基本都在万能的 nginx/conf/nginx.conf 中完成,其它文件可以不用理
关于 nginx.conf


#需要我们按需要修改的一般只有中间 server 里的代码
server {
# 设置监听端口
listen 9000;
server_name localhost;
# 设置静态资源路径,如下设置打输入地址时会打开 H 盘 app/dist 下的 index 页面
location / {
root H:/app/dist;
index index.html;
}
# 报错页面,同上根据需要设置,也可不理
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}

这样一个简单服务的配置就完成了,启动服务访问 http://localhost:9000 即可打开对应网页,如果需要启动多个服务,只需多添加 server 配置后重启即可。
几个常用的操作指令 (以下指令请在 nginx 文件目录下使用)

# 启动 nginx(我的情况是运行起来后 cmd 就输入不了其它指令了,需要在打开一个 cmd 来操作)
nginx.exe
# 修改 nginx.conf 文件后重启 nginx
nginx.exe -s reload
# 暂停 nginx 服务
nginx.exe -s stop
# 有时暂停服务失效,需要强制终止 nginx 进程 注:/f 强制执行
taskkill /im nginx.exe /f
2. 反向代理解决跨域问题
通常开发环境可以通过设置 proxy 解决跨域问题,而生产环境下要么把前端项目放在后端项目里,要么设置 cor 解决跨域问题,前者不利于前后端分离,后者需要后端配置,而现在使用 nginx 做启动服务设置反向代理可以很好解决跨域问题。
还是回到万能的 nginx.conf 文件,添加 location 匹配规则实现代理转发
server {
listen 9000;
server_name localhost;

location / {
root H:/app/dist;
index index.html;
}
#设置代理转发
location /api/ {
proxy_pass http://localhost:9600/;
}

error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}

通过上面的设置,在重启服务,可以让页面中所有包含 /api/ 字段的请求都转为由服务器去向 http://localhost:9600/ 地址发送请求,从而巧妙的解决了浏览器的跨域问题。
怎么样,是不是很简单,快动手配置是试试吧 (^_^)~

退出移动版