502 proxy error解决方法_【第1期】Nginx: nginx之反向代理 proxy_pass

原创文章，转载请注明原文章地址，谢谢！

问题描述：

由于项目采用了前后端分离的方案进行开发，前端vue发布后绑定域名http://www.sckt.com占用了80端口，后端接口只能用其它端口，我这里用了8103端口。

这样会出现一个问题，前端调用后端接口只能用 https://www.sckt.com:8103/... 方式，暴露了后端端口，很不优雅，还好后端接口都api前缀，可以用nginx反向代理来解决。

解决方案：

为解决这个问题，采用了nginx的反向代理proxy_pass。

location /api/ {
     proxy_pass https://www.sckt.com:8103;
}

在nginx中配置proxy_pass代理转发时，如果在proxy_pass后面的url加/，表示绝对根路径；如果没有/，表示相对路径，把匹配的路径部分也给代理走。

具体nginx.conf如下：

user  nginx;
worker_processes  2;
error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;
events {
    worker_connections  1024;
}
http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';
    access_log  /var/log/nginx/access.log  main;
    sendfile        on;
    #tcp_nopush     on;
    keepalive_timeout  65;
    #gzip  on;
​
    proxy_redirect          off;
    proxy_set_header        Host $host;
    proxy_set_header        X-Real-IP $remote_addr;
    proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
    client_max_body_size    10m;
    client_body_buffer_size   128k;
    proxy_connect_timeout   5s;
    proxy_send_timeout      5s;
    proxy_read_timeout      5s;
    proxy_buffer_size        4k;
    proxy_buffers           4 32k;
    proxy_busy_buffers_size  64k;
    proxy_temp_file_write_size 64k;
    server {
            listen 80;
            server_name  www.sckt.com;
            location  /  {
                   root  /home/wz;
                   index  index.html;
                   try_files $uri $uri/ /index.html;
            }
​
             location /api/ {
                   proxy_pass https://www.sckt.com:8103;
             }
​
            location ~ .*.(xls|xlsx)$ {
                   add_header Cache-Control no-store;
            }
       }
}

重启nginx后，就可以通过http://www.sckt.com/api/...进行调用后端接口了