微信公众号开发,反向代理至本地的方法

1. 因为webpack起的devServer 指向的是localhost, 而公众号登录通常会跳转一个微信授权获取code的地址,如

const GET_OPEN_ID_URL = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxfdfea590dfe9a10ereqd1cf11e1&redirect_uri=http://www.love.com/dist/index.html&response_type=code&scope=snsapi_base&#wechat_redirect`

而上面的 redirect_uri 又必须是微信验证过的网址,不是能是localhost:8000这样的地址,所以就需要修改本的hosts文件,强制跳至127.0.0.1

2. 修改hosts文件,内容如下

127.0.0.1 localhost

127.0.1.1 gyx-PC

127.0.0.1 u.jiyoukeji.cn

127.0.0.1 www.love.com

此时微信再跳转 www.love.com 时,会跳至127.0.0.1的端口

3. 但是通常网页的默认端口是80,也就是说 http://www.love.com/dist/index.html 会跳至 localhost:80 (127.0.0.1:80)端口,而webpack的devServer的地址通常是locahost:8080等。所以需要起一个nginx 服务器, 将80端口的请求反向代理至8080端口,nginx 代理服务器的核心部分配置如下

server {    

    listen 80;    

    server_name www.love.com;    

    #charset koi8-r;    

    #access_log logs/host.access.log main;    

    location / {        

        #root html;        

        #index index.html index.htm;        

        proxy_pass http://localhost:8080;    

    }

}

由于我的开发环境用的deepin,通常情况会在Home下写一个简单的脚本用来一键启动

#!bin/bash

cd /usr/local/nginx

sudo ./sbin/nginx -c ./conf/love.conf

4. 由于hosts 文件中,已经将www.love.com的地址定向至了localhost,因为所有指向该地址的真实请求都不会生效,因些在开发环境下还要将请求api的接口改为ip请求。不能是原来的地址请求的方式。

5. 需要注意的问题,由于修改了hosts文件,如果(例)www.love.com 上有其他的开发项目,会导致请求无效的问题,记得要改回来。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 大多数 Nginx 新手都会频繁遇到这样一个困惑,那就是当同一个location配置块使用了多个 Nginx 模块...
    SkTj阅读 12,462评论 0 12
  • 一、BIND是什么 BIND是互联网应用最为广泛的DNS软件。 二、BIND的安装与使用 以下内容转自 http:...
    0_0啊阅读 8,491评论 0 0
  • 名词延伸 通俗的说,域名就相当于一个家庭的门牌号码,别人通过这个号码可以很容易的找到你。如果把IP地址比作一间房子...
    杨大虾阅读 20,716评论 2 56
  • 1 Redis介绍1.1 什么是NoSql为了解决高并发、高可扩展、高可用、大数据存储问题而产生的数据库解决方...
    克鲁德李阅读 10,847评论 0 36
  • 最近有个挺火的话题,关于初恋。有多少人和初恋一直在一起? 我更好奇的是,有多少人时隔多年再跟初恋复合。最后,走到了...
    爱吃榴莲的狗阅读 2,405评论 0 1

友情链接更多精彩内容