nginx接口反向代理配置介绍

nginx接口反向代理配置介绍

作为前端开发,每次调试接口,把代码发到测试服务器,是很费时费事的一件事情。
为了提高效率,想到了nginx反向代理来解决这一问题。

接口地址:
test.com

访问地址:
localhost

最核心的问题就是,登录时,无法写入Cookie的问题,为了解决这个问题,走了不少弯路。

worker_processes  1; events {     worker_connections  1024; } http {     include       mime.types;     default_type  application/octet-stream;     sendfile      on;     keepalive_timeout 10;     server {         listen  80;         server_name  localhost;                  location =/ {             add_header X-Frame-Options SAMEORIGIN;             root        D:/workspace/;             index index.html;         }          location ~* .(html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css|swf|woff|woff2|ttf|json|svg|cur|vue|otf|eot)$ {             charset     utf-8;             root        D:/workspace/;             expires     3d;         }                  location = /socket/v2 {             proxy_pass   http://test.com;             proxy_redirect off;             proxy_http_version 1.1;             proxy_set_header Upgrade $http_upgrade;             proxy_set_header Connection "upgrade";             proxy_set_header Host test.com;             proxy_set_header X-Real-IP $remote_addr;             proxy_set_header REMOTE-HOST $remote_addr;             proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;             proxy_connect_timeout 30;             proxy_send_timeout 30;             proxy_read_timeout 60;             proxy_buffer_size 256k;             proxy_buffers 4 256k;         }                  location / {             proxy_pass   http://test.com;             proxy_set_header Cookie $http_cookie;             proxy_cookie_domain test.com localhost;             proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;             proxy_set_header Host test.com;             proxy_set_header X-Real-IP $remote_addr;             proxy_set_header REMOTE-HOST $remote_addr;         }     } }

核心代码在三行代码上:
proxy_set_header Cookie $http_cookie;
proxy_cookie_domain test.com localhost;
proxy_set_header Host test.com;

具体解释我也是一知半解:
第一个是携带cookie,
第二个设置cookie 的 domain
第三个 设置真实的host

重要提示:以上3个的顺序不要颠倒,否则代理失败,我也不知道为什么。

如何在手机上调试呢?

手机上不可能直接访问localhost,可以把手机和电脑连接到同一个网段,使用电脑的ip进行访问。

但是这里只代理了localhost,并没有代理电脑的ip

所以,需要把是上面的server{…}拷贝一份,只需要把里面的localhost全部改成你的电脑ip就可以了,最终代码:

worker_processes  1; events {     worker_connections  1024; } http {     include       mime.types;     default_type  application/octet-stream;     sendfile      on;     keepalive_timeout 10;     server {         listen  80;         server_name  localhost;                  location =/ {             add_header X-Frame-Options SAMEORIGIN;             root        D:/workspace/;             index index.html;         }          location ~* .(html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css|swf|woff|woff2|ttf|json|svg|cur|vue|otf|eot)$ {             charset     utf-8;             root        D:/workspace/;             expires     3d;         }                  location = /socket/v2 {             proxy_pass   http://test.com;             proxy_redirect off;             proxy_http_version 1.1;             proxy_set_header Upgrade $http_upgrade;             proxy_set_header Connection "upgrade";             proxy_set_header Host test.com;             proxy_set_header X-Real-IP $remote_addr;             proxy_set_header REMOTE-HOST $remote_addr;             proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;             proxy_connect_timeout 30;             proxy_send_timeout 30;             proxy_read_timeout 60;             proxy_buffer_size 256k;             proxy_buffers 4 256k;         }                  location / {             proxy_pass   http://test.com;             proxy_set_header Cookie $http_cookie;             proxy_cookie_domain test.com localhost;             proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;             proxy_set_header Host test.com;             proxy_set_header X-Real-IP $remote_addr;             proxy_set_header REMOTE-HOST $remote_addr;         }     }     server {         listen  8080;         server_name  xx.xx.xx.xx;                  location =/ {             add_header X-Frame-Options SAMEORIGIN;             root        D:/workspace/;             index index.html;         }          location ~* .(html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css|swf|woff|woff2|ttf|json|svg|cur|vue|otf|eot)$ {             charset     utf-8;             root        D:/workspace/;             expires     3d;         }                  location = /socket/v2 {             proxy_pass   http://test.com;             proxy_redirect off;             proxy_http_version 1.1;             proxy_set_header Upgrade $http_upgrade;             proxy_set_header Connection "upgrade";             proxy_set_header Host test.com;             proxy_set_header X-Real-IP $remote_addr;             proxy_set_header REMOTE-HOST $remote_addr;             proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;             proxy_connect_timeout 30;             proxy_send_timeout 30;             proxy_read_timeout 60;             proxy_buffer_size 256k;             proxy_buffers 4 256k;         }                  location / {             proxy_pass   http://test.com;             proxy_set_header Cookie $http_cookie;             proxy_cookie_domain test.com xx.xx.xx.xx;             proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;             proxy_set_header Host test.com;             proxy_set_header X-Real-IP $remote_addr;             proxy_set_header REMOTE-HOST $remote_addr;         }     } }

访问方法:

http://xx.xx.xx.xx:8080 即可

如果是打包工具生成增这个配置的话,可以用nodejs动态获取你电脑的ip

function  getIPAdress() {           var  interfaces  =  require('os').networkInterfaces();           for (var  devName  in  interfaces) {                     var  iface  =  interfaces[devName];                     for (var  i = 0; i <p>所以,这里贴出来一个动态生成nginx.config的工具</p><pre class="brush:js;toolbar:false">function buildNginxConfig(config) {     function  getIPAdress() {               var  interfaces  =  require('os').networkInterfaces();               for (var  devName  in  interfaces) {                         var  iface  =  interfaces[devName];                         for (var  i = 0; i <p>有了这个万能反向代理,可以随心所欲的玩转任何网站接口了</p><p>推荐教程:<a href="https://www.php.cn/nginx/" target="_blank">nginx教程</a></p>

© 版权声明
THE END
喜欢就支持一下吧
点赞13 分享