开发React/Node Chrome扩展时WebpackDevServer代理配置不生效问题咨询

问题根因 #

你配置的WebpackDevServer代理仅对直接从localhost:5000域名下加载的页面发起的请求生效。Chrome扩展的页面是通过chrome-extension://协议从本地加载的，相对路径请求默认以扩展ID作为请求base，不会走你的开发服务，自然无法触发代理规则。你直接写完整路径能正常请求，就是因为跳过了相对路径的base拼接逻辑，直接访问了后端服务。

解决方案 #

方案1：配置Axios的baseURL区分环境 #

在前端入口代码中添加如下配置，开发环境下强制所有请求走开发服务，触发代理规则：

// 开发环境统一加开发服务前缀
if (process.env.NODE_ENV === 'development') {
  axios.defaults.baseURL = 'http://localhost:5000'
}
// 生产环境可根据实际后端部署地址设置对应baseURL

如果不想走代理转发，也可以直接把开发环境的baseURL设置为http://localhost:4000，效果和你手动写全路径一致。

方案2：调整扩展权限（可选） #

如果直接请求后端接口出现跨域拦截，需要在Chrome扩展的manifest.json中添加host权限配置：

{
  "host_permissions": ["http://localhost:4000/*"]
}

可选优化：完善代理配置 #

你当前的代理配置可补充changeOrigin参数避免特殊场景下的Host校验问题：

proxy: {
  '/api': {
    target: 'http://localhost:4000',
    changeOrigin: true
  }
}

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