nginx 配置反向代理-向日葵屋

nginx 配置反向代理

蔚落 2023-05-29 06:51 10阅读 0赞

一、vue项目中，开发阶段可以自己配置代理，将localhost+端口映射成实际的 ip+端口，不过vue在实际打包后这个代理会失效，不会有这种映射关系存在，所以就会出现访问路径是 localhost+端口的情况，此时肯定是访问不了的，需要通过代理将监听localhost+端口将监听到的转到实际的 IP+端口。

二、Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器，在BSD-like 协议下发行。其特点是占有内存少，并发能力强，事实上nginx的并发能力在同类型的网页服务器中表现较好，中国大陆使用nginx网站用户有：百度、京东、新浪、网易、腾讯、淘宝等。作用很多，今天就先说反向代理配置。

三、下载nginx，下载地址：链接：https://pan.baidu.com/s/1gIN2MblSsNSnqEMXv-BsEg 提取码：fg90 这是我个人的有空搞的一个软件包，里面有很多可以用得到的软件，其中有nginx，可自行选择下载。

四、下载好的包，找个目录解压解压后目录如下：

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0Mjk3NTYz_size_16_color_FFFFFF_t_70

在该目录下打开cmd,输入命令：start nginx,之后打开浏览器，直接访问localhost，如果是nginx的欢迎界面，证明安装成功，步骤很简单。

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0Mjk3NTYz_size_16_color_FFFFFF_t_70 1

4.1 反向代理配置

打开nginx中conf文件夹，之后编辑nginx.conf文件

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0Mjk3NTYz_size_16_color_FFFFFF_t_70 2

现假设现在vue写的项目打包，包名为dist,放到：D:/cjdbh_web02/dist; 这个目录，然后要通过 www.cjdbh.com 来访问该项目，（这里要强调一下，如果通过 www.cjdbh.com 这种是狭义上的域名，也就是说只有自己可以用，需要将本地host文件中配置www.cjdbh.com，映射为127.0.0.1，如果不想配置，那就不用这种域名，直接写成localhost即可，我这里就用域名），然后将访问路径通过：http://192.168.102.124:8088/; 这种实际的IP+端口或者域名来做代理。配置如下：

server {
        listen       80;#如果这个地方80被占用了，就换任意其他的没被占用的即可
        server_name  www.cjdbh.com; #这个地方用localhost代替也行
        root   D:/cjdbh_web02/dist;  #这个地方是vue的包放的位置，注意root是全局的，其他地方不能再有了
        #charset koi8-r;
        #access_log  logs/host.access.log  main;
         location /api/ {
            proxy_pass  http://192.168.102.124:8088/; # 这个是反向代理地址
                # 以下都是解决跨域需要添加的请求头信息
                proxy_set_header Host $http_host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                add_header Access-Control-Allow-Origin *;
                add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept";
                add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";    
        }