UmiJS React应用中如何将第三方库请求的远程资源重定向到本地？

开发环境解决方案 #

直接在Umi的配置文件（.umirc.ts 或 config/config.ts）中配置devServer.proxy，将目标CDN路径的请求转发到本地服务：

export default defineConfig({
  // 保留原有其他配置
  devServer: {
    proxy: {
      '/npm/emoji-datasource-apple@14.0.0/img/apple/sheets-256': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        pathRewrite: {
          '^/npm/emoji-datasource-apple@14.0.0/img/apple/sheets-256': '',
        },
      },
    },
  },
});

这个配置会把所有指向https://cdn.jsdelivr.net/npm/emoji-datasource-apple@14.0.0/img/apple/sheets-256/下的资源请求，自动转发到localhost:8080，同时移除CDN路径前缀，最终请求localhost:8080/64.png。

生产环境解决方案 #

如果是生产部署场景，可以用反向代理服务器（比如Nginx）配置重定向规则：

location /npm/emoji-datasource-apple@14.0.0/img/apple/sheets-256/ {
  proxy_pass http://localhost:8080/;
}

部署后，所有匹配该路径的请求都会被Nginx转发到本地服务，避免远程CDN加载慢的问题。

核心逻辑是：由于第三方库发起的请求无法通过前端拦截器干预，只能通过服务器层面的代理/重定向机制，将远程请求映射到本地资源。

内容的提问来源于stack exchange，提问作者QianKevin