前端项目配置动态IP和动态端口代理

有这样一个场景，接口返回的url地址是动态变化的，然后前端需要调用这个动态变化的地址，正常情况是不能直接访问的，会有跨域问题。如何动态配置呢？

现象

直接访问出现跨域问题，如截图所示：

处理

nginx反向代理配置

• 说明：$http_inference_ip 动态ip地址
• 说明：$http_inference_port 动态端口
• 说明：$http_inference_url 动态传参

前端处理

    const url = this.requestUrl[this.form.routerIndex];
    const urlMain = url.substring(url.indexOf('//') + 2);
    const urls = urlMain.replace(':', '/').split('/');
    axios
        .post(`${process.env.VUE_APP_UPLOAD_API}/inference`, {
          headers: {
            'Inference-Ip': urls[0],
            'Inference-Port': urls[1],
            'Inference-Url': urls[2],
            'Content-Type': 'application/json',
          },
          data: JSON.stringify(this.form.json),
        })
        .then((res) => {
          // 一些处理
        })
        .catch(() => {
          // 一些错误处理
        });

前端上传到一个指定的固定地址（开发代理地址）

结束语

前后端配合完成动态地址代理，完结撒花！