使用JavaScript Fetch传递URL参数时取消XML编码的方法

你的代码存在两个关键问题，导致XML参数的传递不符合预期：

• 构建API URL时额外添加了双引号，这些引号会被当作URL的一部分发送，直接破坏了参数格式；
• 生成的XML包含大量换行和缩进空格，这些空白字符被encodeURIComponent编码成%0A和%20，虽然USPS API支持编码后的参数，但多余的空白并非必要；
• 另外，GET请求的Content-Type设置无效，因为GET参数是放在URL中的，请求体为空，这个配置可以直接移除。

修改后的代码 #

export const useZipCodeApi = (zipCode,cityID,stateID) => {    
    const [msgState,msgDispatch] = useContext(MessageContext);
    const fetchData = async() => {        
        // 移除无用的Content-Type配置，GET请求无需设置
        let headers = { credentials: "include", method: "get" }
        // 生成紧凑格式的XML，去掉多余换行和缩进
        const request = `<CityStateLookupRequest USERID="${Config.USPS.userID}"><ZipCode ID="0"><Zip5>${zipCode}</Zip5></ZipCode></CityStateLookupRequest>`;        
        // 移除多余的双引号，直接拼接编码后的XML参数
        let api = `${Config.USPS.apiUrl}${encodeURIComponent(request)}`;                
        const resp = await fetch(api, {...headers});
        const jsonResp = await resp.text();
        if (jsonResp){
            let xmlData = await jsonResp.xmlData();
            // 处理cityID和stateID的逻辑
        }
    }
    useEffect(() => {if(zipCode) fetchData();}, [zipCode]);    
}

补充说明 #

URL中的特殊字符（如<、>、"）必须进行URL编码，否则会破坏URL结构导致请求失败。USPS的API会自动解码这些编码后的参数，所以无需担心无法识别。你提供的「目标URL」中的<是HTML转义字符，仅用于网页显示，并非实际发送的URL内容。

如果需要保留XML的格式空白（如换行、缩进），可以保留原始的多行request写法，但务必去掉URL拼接时的多余双引号。

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