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

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

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

Js代码

server {
listen 8088;
server_name www.toutiao.im;
location / {
root html;
index index.html index.htm;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
location ~ /wenda {
allow 127.0.0.1;
allow 10.0.0.0/8;
deny all;
keepalive_timeout 300s;
proxy_set_header X-Forwarded-For $remote_addr;
proxy_http_version 1.1;
proxy_set_header Connection "";
proxy_pass http://localhost:8083;
add_header Access-Control-Allow-Origin '*';
#access_log /Users/shenhongxi/dev/nginx/logs/access.log combined;
}
location = / {
rewrite ^ /index.html;
}
location ~* \.(html|htm|js|css|png|jpg|gif|map)$ {
allow 127.0.0.1;
allow 10.0.0.0/8;
deny all;
proxy_pass http://www.toutiao.im;
#root /Users/shenhongxi/work/360/wenda/code/wenda-static/;
autoindex off;
add_header Access-Control-Allow-Origin '*';
}
}

在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

通过nginx实现线上页面访问本地接口相关推荐

ZanProxy —— 本地代码调试线上页面，环境再也不是问题
一.ZanProxy 是什么一言以蔽之,ZanProxy 是一个基于 Node.js 的代理服务器.它专注于帮助前端开发提高开发效率. 二.我们为什么需要一个代理工具在前端开发中,我们常常会碰到以 ...
Nginx启动成功但页面访问不到的解决方法
解决Nginx启动成功但页面访问不到的解决方法: 1.首先查看Nginx进程:ps -ef | grep nginx 如图所示,代表Nginx启动成功.(相关阅读推荐:Nginx启动不起来怎么办) 2 ...
nginx之线上CDN的rewrite规则修改
线上的CDN厂商的nginx的rewrite规则配置验证环境介绍: [root@localhost ~]# cat /etc/redhat-release CentOS Linux release ...
php 绝对刷新,vue项目线上页面刷新报404 解决方法(绝对有用)
在上线vue开发的前端网页上线后,刷新页面报404错误,因为网页上显示的是静态绝对路径,实际上服务器上是没有改路径的所以刷新汇报错误. 1.vue框架中解决404 vue router mode 默 ...
前端项目线上环境搭建(Nginx)和线上部署(推荐)
本次主要讲解的是服务器上node环境的搭建,以及vue/react/等的项目的部署,作为一名前端,一定要学会哦. 购买云服务器/主机云服务器:阿里云.百度云.新浪云.腾讯云主机:不建议购买,共享的 ...
新零售背景下“农村淘宝“线下和线上服务
新零售背景下"农村淘宝"线下和线上服务农村淘宝在做什么? 2019年对于农村淘宝(下文简称"村淘")来说是关键的一年,作为阿里巴巴集团新零售战略中的第六路大军 ...
线上支付支付宝个人支付接入流程详解
一直以为想做线上支付必须要有营业执照,害得我和很多个人开发者一样,绕了很多圈子.尝试过一些第三方的接入(不稳定,担心跑路). 原来支付宝是有个人支付接口的,利用支付宝的"当面付"接 ...
Nginx代理内网服务器访问外网
Nginx代理内网服务器访问外网 1.SpringBoot工程配置文件改写 2. SpringBoot静态工具类注入配置文件变量 3. SpringBoot 使用 4. 配置Nginx 问题描述: 有 ...
线上房源推荐在房地产行业的应用实践
采用协同过滤,进行客户线上房源的推荐,算法的核心是根据用户-物品矩阵,进行交叉推荐,其目的根据客户行为的数据,把客户最感兴趣但未访问过的房源推荐给客户. 1.1 ALS算法原理注:参考文献: ...
uniapp history 模式本地开发正常，线上H5在nginx下页面空白、微信回调或者刷新出现404
本地开发中完全正常,打包发布到线上发现页面在微信登录回调后出现 404 一.怀疑是nginx站点配置文件没有加载最新尝试解决 SSH 进服务器查看是否有多个nginx主进程重启nginx 二.怀疑 ...

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

通过nginx实现线上页面访问本地接口相关推荐

最新文章

热门文章