VSCode中Microsoft Dev Tunnel端口重复添加问题求助

我使用Next.js框架开发应用，其中跳转至登录页的链接在本地环境运行正常，但使用Microsoft Dev Tunnel时，URL中会重复添加端口，导致无法正常访问。

我的代码如下：

function redirectToLogin(locale: string) {
    return NextResponse.redirect(
      new URL(`/${locale}/login`, hostURL)
    );
}

Dev Tunnel生成的错误URL：

https://k630pqpg-3000.euw.devtunnels.ms:3000/tr/login

期望的正确URL为以下两者之一：

https://k630pqpg-3000.euw.devtunnels.ms/tr/login

或

https://k630pqpg.euw.devtunnels.ms:3000/tr/login

目前只能手动修改URL作为临时解决方案，希望修复该问题或找到永久解决办法，同时想了解是否可以自定义Dev Tunnel生成的URL？

1. 修正URL拼接逻辑 #

问题根源在于hostURL的取值：Dev Tunnel的域名已包含端口标识（如k630pqpg-3000.euw.devtunnels.ms中的-3000对应本地端口），若代码同时将端口添加到URL的端口部分，就会导致重复。

方案一：手动处理Dev Tunnel域名 #

解析并移除域名中的端口参数：

function redirectToLogin(locale: string) {
  const parsedHost = new URL(hostURL);
  // 针对Dev Tunnel域名，清空端口部分
  if (parsedHost.hostname.includes('.devtunnels.ms')) {
    parsedHost.port = '';
  }
  return NextResponse.redirect(
    new URL(`/${locale}/login`, parsedHost.toString())
  );
}

方案二：使用Next.js原生请求对象构建URL #

利用request.nextUrl.origin自动获取当前请求的正确域名，避免手动拼接错误：

import { NextRequest, NextResponse } from 'next/server';

function redirectToLogin(locale: string, request: NextRequest) {
  const loginUrl = new URL(`/${locale}/login`, request.nextUrl.origin);
  return NextResponse.redirect(loginUrl);
}

2. 自定义Dev Tunnel URL #

Microsoft Dev Tunnel支持两种自定义URL的方式：

• 指定固定子域名：通过CLI创建隧道时使用--subdomain参数，示例：

  devtunnel create --subdomain my-custom-subdomain --port 3000
  

  生成的URL为https://my-custom-subdomain.euw.devtunnels.ms，自动映射本地3000端口，无需额外添加端口号。
• 绑定自有域名：若拥有独立域名，可在Dev Tunnel控制台添加域名绑定，将隧道映射到自有域名，实现完全自定义的访问URL。

如果使用VSCode的Dev Tunnel插件，可在创建隧道时的配置选项中设置固定子域名，避免自动生成带端口后缀的域名。

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