V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Distributions
Ubuntu
Fedora
CentOS
中文资源站
网易开源镜像站
JoeBreeze
V2EX  ›  Linux

Ubuntu+Chrome 如何实现网页应用, 调用接口时代理到本地接口服务

  •  
  •   JoeBreeze · 2022-01-09 15:54:25 +08:00 · 2991 次点击
    这是一个创建于 1078 天前的主题,其中的信息可能已经有所发展或是发生改变。

    是不是可以通过修改 /etc/吼丝特丝 实现, 菜鸡求助 QAQ

    比如: 打开 www.xxx-admin.com, 这个后台调用的接口域名是 api.xxx-admin.com, 如何将调用的过程代理为调用本地 docker 服务 127.0.0.1:8081

    第 1 条附言  ·  2022-01-09 18:30:22 +08:00

    准备工作

    1. 添加映射关系
      sudo echo 127.0.0.1 api.xxx-admin.com >> /etc/hosts

    2. 添加代理配置
      sudo vim /etc/nginx/conf.d/api.xxx-admin.com.conf

      server {
          listen 80;
          
          server_name api.xxx-admin.com;
      
          location / {
              proxy_pass http://127.0.0.1:8081/;
          }
      }
      
      
    3. sudo nginx -s reload

    测试1

    打开后台界面 xxx-admin.com, F12->console 可以看到报错 net::ERR_CONNECTION_REFUSED

    自建https证书

    本地自签https证书[1]

    根据上述教程完成之后, 上述代理配置修改为

    server {
        listen 80;
        listen 443 ssl http2;  # 新增
    
        ssl_certificate /etc/nginx/ssl/localhost.crt;  # 新增
        ssl_certificate_key /etc/nginx/ssl/localhost.key;  # 新增
    
        server_name api.xxx-admin.com;
    
        location / {
            proxy_pass http://127.0.0.1:8081/;
        }
    }
    

    执行 nginx -s reload 后再次测试

    测试2

    • 打开后台界面, 还是报错
    • 使用 postman 调试通过, (关闭证书检查 File->settings->SSL certificate verification:OFF)
    • 通过让Chrome允许自建证书[2] (typing "thisisunsafe" anywhere 有种玩GTA的感觉...), 然后再次通过后台界面调用接口顺利实现了

    参考资料

    9 条回复    2022-01-10 14:08:16 +08:00
    kkocdko
        1
    kkocdko  
       2022-01-09 16:23:59 +08:00 via Android
    JoeBreeze
        2
    JoeBreeze  
    OP
       2022-01-09 16:25:06 +08:00
    - /etc/h ost s

    ```
    #...
    127.0.0.1 api.xxx-admin.com
    ```

    - /etc/nginx/config.d/api.xxx-admin.com

    ```
    {
    listen 80;

    server_name api.xxx-admin.com;

    location / {
    proxy_pass http://127.0.0.1:8081/;
    }
    }
    ```
    JoeBreeze
        3
    JoeBreeze  
    OP
       2022-01-09 16:26:57 +08:00
    @kkocdko #1 好的我试试! 用了 switch proxy omega 好像也行, 但是会影响其他代理, 不知道怎么设置好
    ZSeptember
        4
    ZSeptember  
       2022-01-09 17:59:33 +08:00
    https://github.com/avwo/whistle 搭配 Chrome whistle 插件
    defunct9
        5
    defunct9  
       2022-01-09 18:23:19 +08:00 via iPhone
    JoeBreeze
        6
    JoeBreeze  
    OP
       2022-01-09 18:28:06 +08:00
    谢谢各位的帮助! 已经顺利解决了, 准备整理 po 上解决方案(不依赖插件)
    onhao
        7
    onhao  
       2022-01-09 18:29:18 +08:00
    https://wuhao.pw/archives/88/ Falcon-Proxy_v0.7.1.crx
    yuezk
        8
    yuezk  
       2022-01-10 14:03:21 +08:00
    生成自签名证书,推荐这个 https://github.com/FiloSottile/mkcert
    JoeBreeze
        9
    JoeBreeze  
    OP
       2022-01-10 14:08:16 +08:00
    @yuezk #8 ohhhh 马克马克!!!
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2866 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 12:30 · PVG 20:30 · LAX 04:30 · JFK 07:30
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.