前端开发常见坑处理

内网图片、协议不一致处理

https不能调用http,后端返回的内网图片不能正常显示，开发环境https证书错误无法加载

1、修改代码处理图片路径走内网代理

  // 第三方图片转换为内网图片地址，避免跨域问题
  const toInternetImage = (src: string) => {
    src = src.trim();
    src = src.startsWith("//") ? `http:${src}` : src;
    if (src.startsWith("http://") ||
      src.startsWith("https://") ||
      src.startsWith("//")) {
      return `${location.origin}/alarm-image/${src}`;
    }
    return src;
  }

2、增加nginx图片代理配置

# 加在 server 区块下
    merge_slashes off;

    # 内网图片代理
    location ~ ^/intranet-image-proxy/(?<upstream_scheme>https?)://(?<upstream_host>(10|172|192)\.\d+\.\d+\.\d+)(?::\d+)?(?<upstream_path>/.*)$ {
        proxy_pass $upstream_scheme://$upstream_host$upstream_path$is_args$args;
        proxy_set_header Host $upstream_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_ssl_verify off;
    }