如何将含空格、制表符的多行字符串作为参数传递给Express服务器？

你的问题出在两个核心点：

1. 服务端参数获取逻辑不匹配：路由定义了路径参数/:prompt，但代码里却尝试获取查询参数req.query.prompt，两者完全不对应，直接导致prompt值为undefined。
2. 客户端未对特殊字符编码：空格、换行、制表符属于URL非法字符，直接拼到URL里会触发解析错误，服务端无法正确识别参数。

下面给出几种可行的解决方案：

方案一：使用查询参数（推荐） #

这种方式对特殊字符的兼容性最好，处理逻辑简单。

修正后的服务端代码 #

app.get('/', async (req, res) => {
  // 从查询参数中获取prompt，客户端需要传?prompt=xxx格式的参数
  const prompt = req.query.prompt;
  // 这里添加你的业务处理逻辑
  res.json({ Answer: prompt }); // 示例响应，返回接收到的内容
});

修正后的客户端代码 #

export function btn_click() {
    console.log('Clicked')
    const prompt = $w("#textBox1").value;
    const originalURL = 'https://11bf-2401-4900-1f35-97fc-68a4-6e62-bb93-34d5.in.ngrok.io/';
    
    // 对包含特殊字符的prompt做URL编码，转换为URL可识别的格式
    const encodedPrompt = encodeURIComponent(prompt);
    // 拼接成带查询参数的完整URL
    const url = `${originalURL}?prompt=${encodedPrompt}`;
    console.log(url);

    fetch(url, { method: 'get' })
        .then(res => res.json())
        .then(ans => {
            console.log(ans);
            const blank = $w("#text3");
            if (ans['Answer'] === undefined){
                blank.text = '请输入必要信息';
            }
            else {
                blank.text = String(ans['Answer']);
            }
            blank.show()
        })
        // 新增错误捕获，方便排查请求异常
        .catch(err => {
            console.error('请求出错:', err);
            $w("#text3").text = '请求失败，请重试';
            $w("#text3").show();
        });
}

方案二：使用路径参数（不推荐长文本） #

如果一定要用路径参数传递，需要调整路由规则和编码逻辑：

服务端代码 #

// 用通配符路由匹配路径后的所有内容
app.get('/*', async (req, res) => {
  // 从通配符参数中获取内容并解码
  const prompt = decodeURIComponent(req.params[0]);
  // 业务处理逻辑
  res.json({ Answer: prompt });
});

客户端代码 #

export function btn_click() {
    console.log('Clicked')
    const prompt = $w("#textBox1").value;
    const originalURL = 'https://11bf-2401-4900-1f35-97fc-68a4-6e62-bb93-34d5.in.ngrok.io/';
    
    // 编码后拼接到路径末尾
    const encodedPrompt = encodeURIComponent(prompt);
    const url = originalURL.concat(encodedPrompt);
    console.log(url);

    fetch(url, { method: 'get' })
        .then(res => res.json())
        .then(ans => {
            // 同方案一的响应处理逻辑
        })
        .catch(err => {
            console.error('请求出错:', err);
            $w("#text3").text = '请求失败，请重试';
            $w("#text3").show();
        });
}

方案三：使用POST请求传递（最适合长文本/多行内容） #

对于多行、长文本或特殊字符较多的内容，建议用POST请求通过请求体传递，避免URL长度限制和编码繁琐问题：

服务端代码 #

// 先引入JSON解析中间件，用于解析请求体
app.use(express.json());

app.post('/', async (req, res) => {
  // 从请求体中获取prompt
  const prompt = req.body.prompt;
  // 业务处理逻辑
  res.json({ Answer: prompt });
});

客户端代码 #

export function btn_click() {
    console.log('Clicked')
    const prompt = $w("#textBox1").value;
    const originalURL = 'https://11bf-2401-4900-1f35-97fc-68a4-6e62-bb93-34d5.in.ngrok.io/';

    fetch(originalURL, { 
        method: 'post',
        // 设置请求头为JSON格式
        headers: {
            'Content-Type': 'application/json',
        },
        // 将prompt转为JSON字符串放在请求体中
        body: JSON.stringify({ prompt: prompt })
    })
        .then(res => res.json())
        .then(ans => {
            console.log(ans);
            const blank = $w("#text3");
            if (ans['Answer'] === undefined){
                blank.text = '请输入必要信息';
            }
            else {
                blank.text = String(ans['Answer']);
            }
            blank.show()
        })
        .catch(err => {
            console.error('请求出错:', err);
            $w("#text3").text = '请求失败，请重试';
            $w("#text3").show();
        });
}

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