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

Moxmi 发布于2019-07-25 14:38 / 1080人阅读

摘要：还是回到万能的文件，添加匹配规则实现代理转发设置代理转发通过上面的设置，在重启服务，可以让页面中所有包含字段的请求都转为由服务器去向地址发送请求，从而巧妙的解决了浏览器的跨域问题。

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/地址发送请求，从而巧妙的解决了浏览器的跨域问题。

怎么样，是不是很简单，快动手配置是试试吧(^_^)~

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/40321.html

Nginx

摘要：此外，其也能够提供强大的反向代理功能。是由为俄罗斯访问量第二的站点开发的，第一个公开版本发布于年月日。 keepalived+nginx 实现高可用双机热备 + 负载均衡架构 1 准备4个ubuntu16.04虚拟机（启用网卡二并使用桥接模式）:A服务器：192.168.0.103 主B服务器：192.168.0.104 主（备）前端工程师学习 Nginx ...

syoya 2019-07-25 14:06 评论0 收藏0
Vue 兼容 ie9 的全面解决方案

摘要：本文将针对使用生态开发完成的网站，以版本为基础兼容目标，实现全功能正常使用的全面兼容解决方案。这样做的目的，是逐步减少全局性方法，使得语言逐步模块化。此外，使用这个，一旦页面不处于浏览器的当前标签，就会自动停止刷新。前言背景情况 vue - 2.5.11 vue-cli 使用模板 webpack-simple http请求：axios Vue 官方对于 ie 浏览器版本兼容情...

codeKK 2019-08-22 18:07 评论0 收藏0
服务器部署工具 - 收藏集 - 掘金

摘要：基本入门前端掘金作者本文属于翻译文章，原文链接为。如果如何把应用放在容器中运行掘金本文适合零基础，且希望使用运行应用的人士。后端掘金使用构建网站。 nginx 基本入门 - 前端 - 掘金作者：villainthr 本文属于翻译文章，原文链接为 nginx Beginner’s Guide。是至今为止见过最好的 nginx 入门文章。额。。。没有之一。这篇教程简单介绍了 nginx ...

Shonim 2019-07-25 13:56 评论0 收藏0
在开发环境下使用nginx重写uri及代理功能

摘要：本文同步在个人博客上，欢迎关注这篇文章整理了在前端开发中，在开发环境下使用重写及代理功能的方法。表示该规则是使用正则定义的，区分大小写。因此牢记在上下文中使用，而在上下文中使用。本文同步在个人博客shymean.com上，欢迎关注这篇文章整理了在前端开发中，在开发环境下使用nginx重写uri及代理功能的方法。参考 nginx中文文档前端开发者必备的 Nginx 知识 Ngin...

LMou 2019-05-21 19:27 评论0 收藏0