一段万能的Nginx接口实现反向代理配置值得收藏！

什么是代理服务器

代理服务器，客户机在发送请求时，不会直接发送给目的主机，而是先发送给代理服务器，代理服务接受客户机请求之后，再向主机发出，并接收目的主机返回的数据，存放在代理服务器的硬盘中，再发送给客户机。

为什么要使用代理服务器

1)提高访问速度

由于目标主机返回的数据会存放在代理服务器的硬盘中，因此下一次客户再访问相同的站点数据时，会直接从代理服务器的硬盘中读取，起到了缓存的作用，尤其对于热门站点能明显提高请求速度。

2)防火墙作用

由于所有的客户机请求都必须通过代理服务器访问远程站点，因此可在代理服务器上设限，过滤某些不安全信息。

3)通过代理服务器访问不能访问的目标站点

互联网上有许多开发的代理服务器，客户机在访问受限时，可通过不受限的代理服务器访问目标站点，通俗说，我们使用的翻墙浏览器就是利用了代理服务器，虽然不能出国，但也可直接访问外网。

反向代理 VS 正向代理

1、什么是正向代理?什么是反向代理?

正向代理，架设在客户机与目标主机之间，只用于代理内部网络对Internet的连接请求，客户机必须指定代理服务器,并将本来要直接发送到Web服务器上的http请求发送到代理服务器中。

反向代理服务器架设在服务器端，通过缓冲经常被请求的页面来缓解服务器的工作量，将客户机请求转发给内部网络上的目标服务器;并将从服务器上得到的结果返回给Internet上请求连接的客户端，此时代理服务器与目标主机一起对外表现为一个服务器。

2、反向代理有哪些主要应用?

现在许多大型web网站都用到反向代理。除了可以防止外网对内网服务器的恶性攻击、缓存以减少服务器的压力和访问安全控制之外，还可以进行负载均衡，将用户请求分配给多个服务器。

作为前端开发，每次调试接口，把代码发到测试服务器，是很费时费事的一件事情。

为了提高效率，想到了nginx反向代理来解决这一问题。

接口地址：

1. test.com 

访问地址：

1. localhost 

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

1. worker_processes1; 
2.  
3. events{ 
4.  
5. worker_connections1024; 
6.  
7. } 
8.  
9. http{ 
10.  
11. includemime.types; 
12.  
13. default_typeapplication/octet-stream; 
14.  
15. sendfileon; 
16.  
17. keepalive_timeout10; 
18.  
19. server{ 
20.  
21. listen80; 
22.  
23. server_namelocalhost; 
24.  
25. location=/{ 
26.  
27. add_headerX-Frame-OptionsSAMEORIGIN; 
28.  
29. rootD:/workspace/; 
30.  
31. indexindex.html; 
32.  
33. } 
34.  
35. location~*.(html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css|swf|woff|woff2|ttf|json|svg|cur|vue|otf|eot)${ 
36.  
37. charsetutf-8; 
38.  
39. rootD:/workspace/; 
40.  
41. expires3d; 
42.  
43. } 
44.  
45. location=/socket/v2{ 
46.  
47. proxy_passhttp://test.com; 
48.  
49. proxy_redirectoff; 
50.  
51. proxy_http_version1.1; 
52.  
53. proxy_set_headerUpgrade$http_upgrade; 
54.  
55. proxy_set_headerConnection"upgrade"; 
56.  
57. proxy_set_headerHosttest.com; 
58.  
59. proxy_set_headerX-Real-IP$remote_addr; 
60.  
61. proxy_set_headerREMOTE-HOST$remote_addr; 
62.  
63. proxy_set_headerX-Forwarded-For$proxy_add_x_forwarded_for; 
64.  
65. proxy_connect_timeout30; 
66.  
67. proxy_send_timeout30; 
68.  
69. proxy_read_timeout60; 
70.  
71. proxy_buffer_size256k; 
72.  
73. proxy_buffers4256k; 
74.  
75. } 
76.  
77. location/{ 
78.  
79. proxy_passhttp://test.com; 
80.  
81. proxy_set_headerCookie$http_cookie; 
82.  
83. proxy_cookie_domaintest.comlocalhost; 
84.  
85. proxy_set_headerX-Forwarded-For$proxy_add_x_forwarded_for; 
86.  
87. proxy_set_headerHosttest.com; 
88.  
89. proxy_set_headerX-Real-IP$remote_addr; 
90.  
91. proxy_set_headerREMOTE-HOST$remote_addr; 
92.  
93. } 
94.  
95. } 
96.  
97. } 

核心代码在三行代码上：

具体解释我也是一知半解：

第一个是携带cookie，

第二个设置cookie 的 domain

第三个 设置真实的host

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

如何在手机上调试呢?

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

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

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

1. worker_processes1; 
2.  
3. events{ 
4.  
5. worker_connections1024; 
6.  
7. } 
8.  
9. http{ 
10.  
11. includemime.types; 
12.  
13. default_typeapplication/octet-stream; 
14.  
15. sendfileon; 
16.  
17. keepalive_timeout10; 
18.  
19. server{ 
20.  
21. listen80; 
22.  
23. server_namelocalhost; 
24.  
25. location=/{ 
26.  
27. add_headerX-Frame-OptionsSAMEORIGIN; 
28.  
29. rootD:/workspace/; 
30.  
31. indexindex.html; 
32.  
33. } 
34.  
35. location~*.(html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css|swf|woff|woff2|ttf|json|svg|cur|vue|otf|eot)${ 
36.  
37. charsetutf-8; 
38.  
39. rootD:/workspace/; 
40.  
41. expires3d; 
42.  
43. } 
44.  
45. location=/socket/v2{ 
46.  
47. proxy_passhttp://test.com; 
48.  
49. proxy_redirectoff; 
50.  
51. proxy_http_version1.1; 
52.  
53. proxy_set_headerUpgrade$http_upgrade; 
54.  
55. proxy_set_headerConnection"upgrade"; 
56.  
57. proxy_set_headerHosttest.com; 
58.  
59. proxy_set_headerX-Real-IP$remote_addr; 
60.  
61. proxy_set_headerREMOTE-HOST$remote_addr; 
62.  
63. proxy_set_headerX-Forwarded-For$proxy_add_x_forwarded_for; 
64.  
65. proxy_connect_timeout30; 
66.  
67. proxy_send_timeout30; 
68.  
69. proxy_read_timeout60; 
70.  
71. proxy_buffer_size256k; 
72.  
73. proxy_buffers4256k; 
74.  
75. } 
76.  
77. location/{ 
78.  
79. proxy_passhttp://test.com; 
80.  
81. proxy_set_headerCookie$http_cookie; 
82.  
83. proxy_cookie_domaintest.comlocalhost; 
84.  
85. proxy_set_headerX-Forwarded-For$proxy_add_x_forwarded_for; 
86.  
87. proxy_set_headerHosttest.com; 
88.  
89. proxy_set_headerX-Real-IP$remote_addr; 
90.  
91. proxy_set_headerREMOTE-HOST$remote_addr; 
92.  
93. } 
94.  
95. } 
96.  
97. server{ 
98.  
99. listen8080; 
100.  
101. server_namexx.xx.xx.xx; 
102.  
103. location=/{ 
104.  
105. add_headerX-Frame-OptionsSAMEORIGIN; 
106.  
107. rootD:/workspace/; 
108.  
109. indexindex.html; 
110.  
111. } 
112.  
113. location~*.(html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css|swf|woff|woff2|ttf|json|svg|cur|vue|otf|eot)${ 
114.  
115. charsetutf-8; 
116.  
117. rootD:/workspace/; 
118.  
119. expires3d; 
120.  
121. } 
122.  
123. location=/socket/v2{ 
124.  
125. proxy_passhttp://test.com; 
126.  
127. proxy_redirectoff; 
128.  
129. proxy_http_version1.1; 
130.  
131. proxy_set_headerUpgrade$http_upgrade; 
132.  
133. proxy_set_headerConnection"upgrade"; 
134.  
135. proxy_set_headerHosttest.com; 
136.  
137. proxy_set_headerX-Real-IP$remote_addr; 
138.  
139. proxy_set_headerREMOTE-HOST$remote_addr; 
140.  
141. proxy_set_headerX-Forwarded-For$proxy_add_x_forwarded_for; 
142.  
143. proxy_connect_timeout30; 
144.  
145. proxy_send_timeout30; 
146.  
147. proxy_read_timeout60; 
148.  
149. proxy_buffer_size256k; 
150.  
151. proxy_buffers4256k; 
152.  
153. } 
154.  
155. location/{ 
156.  
157. proxy_passhttp://test.com; 
158.  
159. proxy_set_headerCookie$http_cookie; 
160.  
161. proxy_cookie_domaintest.comxx.xx.xx.xx; 
162.  
163. proxy_set_headerX-Forwarded-For$proxy_add_x_forwarded_for; 
164.  
165. proxy_set_headerHosttest.com; 
166.  
167. proxy_set_headerX-Real-IP$remote_addr; 
168.  
169. proxy_set_headerREMOTE-HOST$remote_addr; 
170.  
171. } 
172.  
173. } 
174.  
175. } 

访问方法：http://xx.xx.xx.xx:8080 即可

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

1. functiongetIPAdress(){ 
2.  
3. varinterfaces=require('os').networkInterfaces(); 
4.  
5. for(vardevNameininterfaces){ 
6.  
7. variface=interfaces[devName]; 
8.  
9. for(vari=0;i 
10.  
11. varalias=iface[i]; 
12.  
13. if(alias.family==='IPv4'&&alias.address!=='127.0.0.1'&&!alias.internal){ 
14.  
15. returnalias.address; 
16.  
17. } 
18.  
19. } 
20.  
21. } 
22.  
23. } 

所以，这里贴出来一个动态生成nginx.config的工具

1. functionbuildNginxConfig(config){ 
2.  
3. functiongetIPAdress(){ 
4.  
5. varinterfaces=require('os').networkInterfaces(); 
6.  
7. for(vardevNameininterfaces){ 
8.  
9. variface=interfaces[devName]; 
10.  
11. for(vari=0;i 
12.  
13. varalias=iface[i]; 
14.  
15. if(alias.family==='IPv4'&&alias.address!=='127.0.0.1'&&!alias.internal){ 
16.  
17. returnalias.address; 
18.  
19. } 
20.  
21. } 
22.  
23. } 
24.  
25. } 
26.  
27. varcwd=process.cwd().replace(/\/g,'/')+'/app'; 
28.  
29. varprotocol=/https|443/.test(config.ip)?'https':'http'; 
30.  
31. varservers=[{ 
32.  
33. browserIp:'localhost', 
34.  
35. port:80, 
36.  
37. root:cwd, 
38.  
39. serverIp:config.ip, 
40.  
41. protocol:protocol, 
42.  
43. },{ 
44.  
45. browserIp:getIPAdress(), 
46.  
47. port:8080, 
48.  
49. root:cwd, 
50.  
51. serverIp:config.ip, 
52.  
53. protocol:protocol, 
54.  
55. }].map(function(item){ 
56.  
57. return` 
58.  
59. server{ 
60.  
61. listen${item.port}; 
62.  
63. server_name${item.browserIp}; 
64.  
65. location=/{ 
66.  
67. add_headerX-Frame-OptionsSAMEORIGIN; 
68.  
69. root${item.root}; 
70.  
71. indexindex.html; 
72.  
73. } 
74.  
75. location~*\.(html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css|swf|woff|woff2|ttf|json|svg|cur|vue|otf|eot)${ 
76.  
77. charsetutf-8; 
78.  
79. root${item.root}; 
80.  
81. expires3d; 
82.  
83. } 
84.  
85. location=/socket/v2{ 
86.  
87. proxy_pass${item.protocol}://${item.serverIp}; 
88.  
89. proxy_redirectoff; 
90.  
91. proxy_http_version1.1; 
92.  
93. proxy_set_headerUpgrade$http_upgrade; 
94.  
95. proxy_set_headerConnection"upgrade"; 
96.  
97. proxy_set_headerHost${item.serverIp}; 
98.  
99. proxy_set_headerX-Real-IP$remote_addr; 
100.  
101. proxy_set_headerREMOTE-HOST$remote_addr; 
102.  
103. proxy_set_headerX-Forwarded-For$proxy_add_x_forwarded_for; 
104.  
105. proxy_connect_timeout30; 
106.  
107. proxy_send_timeout30; 
108.  
109. proxy_read_timeout60; 
110.  
111. proxy_buffer_size256k; 
112.  
113. proxy_buffers4256k; 
114.  
115. } 
116.  
117. location/{ 
118.  
119. proxy_pass${item.protocol}://${item.serverIp}; 
120.  
121. proxy_set_headerCookie$http_cookie; 
122.  
123. proxy_cookie_domain${item.serverIp}${item.browserIp}; 
124.  
125. proxy_set_headerX-Forwarded-For$proxy_add_x_forwarded_for; 
126.  
127. proxy_set_headerHost${item.serverIp}; 
128.  
129. proxy_set_headerX-Real-IP$remote_addr; 
130.  
131. proxy_set_headerREMOTE-HOST$remote_addr; 
132.  
133. } 
134.  
135. }`; 
136.  
137. }).join(' 
138.  
139. '); 
140.  
141. varstr=`worker_processes1; 
142.  
143. events{ 
144.  
145. worker_connections1024; 
146.  
147. } 
148.  
149. http{ 
150.  
151. includemime.types; 
152.  
153. default_typeapplication/octet-stream; 
154.  
155. sendfileon; 
156.  
157. keepalive_timeout10; 
158.  
159. ${servers} 
160.  
161. }`; 
162.  
163. returnstr; 
164.  
165. } 
166.  
167. exports=module.exports=buildNginxConfig; 

有了这个万能反向代理，可以随心所欲的玩转任何网站接口了。