请问如何正确的配置 nginx 反向代理(?

Question

请问如何正确的配置 nginx 反向代理(?

xyzdata opened this issue 7 years ago · 15 comments

Nginx & Reserve Proxy

文档我没有看懂，我本地 server http://127.0.0.1:3000，请问如何正确的配置，才能访问 back-end server http://10.1.5.203/api/test.json ?



#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       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  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       80;
        server_name  http://10.1.5.203;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
		
        location / {
            root   html;
            index  index.html index.htm;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}
		# 202
		location /api/{
            proxy_pass   http://127.0.0.1:3000;
        }
		location / {
			add_header 'Access-Control-Allow-Origin' '*';
		}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }


    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}


    # HTTPS server
    #
    #server {
    #    listen       443 ssl;
    #    server_name  localhost;

    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;

    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;

    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}

}

Q:

我的 .conf 哪里写错了呀？
Nginx 是要安装在服务器上，还是安装到本地的 PC 上?

A:

proxy_pass 是指要代理的 backen IP.
Nginx 安装到本地的 PC 上.

Answer 1 · 2018-04-24T08:00:06.000Z

首先你确认下是访问本地 http://127.0.0.1:3000 时直接代理到 http://10.1.5.203/api/test.json 吗？那访问 http://127.0.0.1:3000/xx.json 代理到 http://10.1.5.203/api/test.json/xx.json 吗？

Nginx 可以做代理转发，是安装到本地，你启动时（如端口是 3000），那么访问本地的服务时，可以代理转发到目标（如 10.1.5.203）中。

Answer 2 · 2018-04-24T08:03:15.000Z

一般来说，代理转发只是转发域名或者路径，不会带文件名，如：

本地	远程	备注
`127.0.0.1:3000`	`10.1.5.203`	推荐
`127.0.0.1:3000`	`10.1.5.203:8080`	推荐
`127.0.0.1:3000/api`	`10.1.5.203/api`	推荐，因为可能直接访问 `/` 时不代理，只代理 `^/api` 开头的路径
`127.0.0.1:3000`	`10.1.5.203/api`	推荐，本地直接代理远程路径
`127.0.0.1:3000`	`10.1.5.203/api/file.json`	不推荐，因为本地代理可能还会存在路径

Answer 3 · 2018-04-24T08:09:51.000Z

我的 Nginx 安装本地的 PC 上的。
配置文件如上所示

请问，这么修改？

client === http://localhost:3000/api/**/*

server === http://10.1.5.203/api/**/*

Answer 4 · 2018-04-24T08:12:43.000Z

Chrome 可以同过 chrome://flags/ 禁用 CR.

但是其他浏览器就不行了，所以我需要一个反向的代理服务器。

Answer 5 · 2018-04-24T08:15:10.000Z

https://docs.nginx.com/nginx/admin-guide/web-server/reverse-proxy/

这个看的有点晕。

Answer 6 · 2018-04-24T08:23:11.000Z

好吧，我自己慢慢研究。打扰了。

Answer 7 · 2018-04-24T08:24:46.000Z

把本地 80 端口所有请求打到 `http://10.1.5.203/` 中

#user  nobody;
worker_processes  1;

events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

    # 默认编码
    charset  utf-8;


    server {
        listen       80;

        # 这里不写，让默认本地所有的 80 端口都走这个
        # server_name 127.0.0.1;

        # 把本地 80 端口所有请求打到 http://10.1.5.203/ 中
        location / {
            proxy_set_header Connection "";
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header Host $http_host;
            proxy_set_header X-NginX-Proxy true;
            proxy_pass  http://10.1.5.203$request_uri;
        }
    }
}

把本地 80 端口以`/api/*` 开头的请求打到 `http://10.1.5.203/api/` 中

#user  nobody;
worker_processes  1;

events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

    # 默认编码
    charset  utf-8;


    server {
        listen       80;

        # 这里不写，让默认本地所有的 80 端口都走这个
        # server_name 127.0.0.1;

        # 把本地 80 端口以 /api/* 开头的请求打到 http://10.1.5.203/api 中
        location /api/ {
            proxy_set_header Connection "";
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header Host $http_host;
            proxy_set_header X-NginX-Proxy true;
            proxy_pass  http://10.1.5.203$request_uri;
        }
    }
}

启动前先使用 [sudo] nginx -t 测试下，如果有错误，可以看结果针对性的修复，没问题就 [sudo] nginx 启动或者 [sudo] nginx -s reload 重启。

Answer 8 · 2018-04-24T08:49:03.000Z

Thansk a lot!

Answer 9 · 2018-04-24T08:57:24.000Z

把本地 80 端口以 /api/* 开头的请求打到 http://10.1.5.203/api/ 中

这样的需求常见于：本地的代码中使用的 $.get('/api/userinfo.json') ，而项目本地运行的只有 HTML 文件，而上线后 /api/userinfo.json 路径是存在的，本地是没有的，那么可以本地启动 Nginx 服务，把静态文件使用 root /path/html; 启用浏览，使用 location /api/ {} 代理到线上，这样本地的 HTML 代码里的 /api/xx 就可以直接使用了。

当然这只是一种场景，现实中会因项目而异，需要结合项目情况调整方案，但可以完成：

跨域代理
跨域 CORS
本地路径映射
线上、内网测试、本地开发环境的打平，如：xx.com 为线上、xx.test 为测试环境、xx.me 为本地开发环境等
...

Answer 10 · 2018-04-24T09:02:51.000Z

Q:

请问, 代理成功了, 为什么还有 CR 问题, 是不是还要开启 CORS ?

add_header 'Access-Control-Allow-Origin' '*';


#user  nobody;
worker_processes  1;

events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

    # 默认编码
    charset  utf-8;


    server {
        listen       80;

        # 这里不写，让默认本地所有的 80 端口都走这个
        # server_name 127.0.0.1;

        # 把本地 80 端口所有请求打到 http://10.1.5.203/ 中
        location / {
	    add_header 'Access-Control-Allow-Origin' '*';
            # enable CORS
            proxy_set_header Connection "";
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header Host $http_host;
            proxy_set_header X-NginX-Proxy true;
            proxy_pass  http://10.1.5.203$request_uri;
        }
    }
}

A:

要开启 CORS

Answer 11 · 2018-04-24T09:07:58.000Z

CORS

https://michielkalkman.com/snippets/nginx-cors-open-configuration/

https://enable-cors.org/server_nginx.html

Answer 12 · 2018-04-24T09:15:43.000Z

你用 add_header 'Access-Control-Allow-Origin' '*'; ，proxy_set_header 是添加代理的 header，也就是目标远程的服务器可以收到 proxy_set_header 设置的数据。

Answer 13 · 2018-04-24T09:18:21.000Z

用了，好像还是不行。看一下是不是我的 code 有问题。

Thanks for your time.

Answer 14 · 2018-04-24T09:36:39.000Z

Sorry, 果然是我写了 hard coding 🐛.

Answer 15 · 2018-04-24T09:37:57.000Z

Thanks for your time, again.

Nginx & Reserve Proxy

Q:

A:

把本地 80 端口所有请求打到 http://10.1.5.203/ 中

把本地 80 端口以/api/* 开头的请求打到 http://10.1.5.203/api/ 中

Q:

CORS

把本地 80 端口所有请求打到 `http://10.1.5.203/` 中

把本地 80 端口以`/api/*` 开头的请求打到 `http://10.1.5.203/api/` 中