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

简介: 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/地址发送请求,从而巧妙的解决了浏览器的跨域问题。
  • 怎么样,是不是很简单,快动手配置是试试吧(^_^)~


相关文章
|
1月前
|
缓存 负载均衡 安全
Nginx常用基本配置总结:从入门到实战的全方位指南
Nginx常用基本配置总结:从入门到实战的全方位指南
256 0
|
6天前
|
存储 负载均衡 中间件
Nginx反向代理配置详解,图文全面总结,建议收藏
Nginx 是大型架构必备中间件,也是大厂喜欢考察的内容,必知必会。本篇全面详解 Nginx 反向代理及配置,建议收藏。
Nginx反向代理配置详解,图文全面总结,建议收藏
|
19天前
|
应用服务中间件 API nginx
nginx配置反向代理404问题
【10月更文挑战第18天】本文介绍了使用Nginx进行反向代理的配置方法,解决了404错误、跨域问题和302重定向问题。关键配置包括代理路径、请求头设置、跨域头添加以及端口转发设置。通过调整`proxy_set_header`和添加必要的HTTP头,实现了稳定的服务代理和跨域访问。
nginx配置反向代理404问题
|
1月前
|
负载均衡 应用服务中间件 Linux
nginx学习,看这一篇就够了:下载、安装。使用:正向代理、反向代理、负载均衡。常用命令和配置文件,很全
这篇博客文章详细介绍了Nginx的下载、安装、配置以及使用,包括正向代理、反向代理、负载均衡、动静分离等高级功能,并通过具体实例讲解了如何进行配置。
149 4
nginx学习,看这一篇就够了:下载、安装。使用:正向代理、反向代理、负载均衡。常用命令和配置文件,很全
|
1月前
|
缓存 前端开发 应用服务中间件
CORS跨域+Nginx配置、Apache配置
CORS跨域+Nginx配置、Apache配置
139 7
|
1月前
|
负载均衡 算法 应用服务中间件
nginx反向代理与负载均衡
nginx反向代理与负载均衡
37 1
|
1月前
|
负载均衡 算法 应用服务中间件
Nginx入门 -- 理解 Nginx 的请求处理流程
Nginx入门 -- 理解 Nginx 的请求处理流程
94 1
|
1月前
|
监控 应用服务中间件 网络安全
部署Django应用:使用Gunicorn和Nginx构建高效的生产环境
部署Django应用:使用Gunicorn和Nginx构建高效的生产环境
106 0
|
5月前
|
监控 前端开发 应用服务中间件
前端开发者必备:Nginx入门实战宝典,从部署到优化一网打尽(2)
前端开发者必备:Nginx入门实战宝典,从部署到优化一网打尽
84 1
|
5月前
|
负载均衡 前端开发 应用服务中间件
前端开发者必备:Nginx入门实战宝典,从部署到优化一网打尽(1)
前端开发者必备:Nginx入门实战宝典,从部署到优化一网打尽
179 1