通过nginx实现线上页面访问本地接口

现在很多web项目是前后端分离的，后端程序员想在本地通过页面测试接口时有些不方便，这时我们可以利用nginx，将静态请求直接转到线上，将接口请求转到本地。

 下载nginx windows版本，解压后在conf目录下新建自己的配置toutiao.conf

Js代码  

1. server {  
2.         listen       8088;  
3.         server_name  www.toutiao.im;  
4.   
5.         location / {  
6.             root   html;  
7.             index  index.html index.htm;  
8.         }  
9.   
10.         error_page   500 502 503 504  /50x.html;  
11.         location = /50x.html {  
12.             root   html;  
13.         }  
14.   
15.     location ~ /wenda {  
16.     allow 127.0.0.1;  
17.     allow 10.0.0.0/8;  
18.       
19.         deny all;  
20.   
21.         keepalive_timeout  300s;  
22.         proxy_set_header X-Forwarded-For $remote_addr;  
23.         proxy_http_version 1.1;  
24.         proxy_set_header Connection "";  
25.         proxy_pass   http://localhost:8083;  
26.         add_header Access-Control-Allow-Origin '*';  
27.      
28.     #access_log  /Users/shenhongxi/dev/nginx/logs/access.log combined;  
29.     }  
30.   
31.     location  = / {  
32.         rewrite ^ /index.html;  
33.     }  
34.   
35.   
36.     location ~* \.(html|htm|js|css|png|jpg|gif|map)$ {  
37.     allow 127.0.0.1;  
38.     allow 10.0.0.0/8;  
39.   
40.     deny all;  
41.   
42.     proxy_pass   http://www.toutiao.im;  
43.     #root /Users/shenhongxi/work/360/wenda/code/wenda-static/;  
44.         autoindex off;  
45.         add_header Access-Control-Allow-Origin '*';  
46.     }  
47. }  

 在nginx.conf末尾添加 include toutiao.conf;

cmd启动nginx: start nginx 停止nginx.exe -s stop 重新加载nginx.exe -s reload

启动本地接口 127.0.0.1:8083

由于既要访问本地，又要访问线上，所以我们需要在浏览器级别设置hosts 127.0.0.1:8088

Host Switch Plus 这个chrome插件可以在浏览器级别切换hosts，配合nginx使用

https://chrome.google.com/webstore/search/Host%20Switch%20Plus?utm_source=chrome-ntp-icon