移动端网页REST API POST请求失败问题求助

以下AJAX代码在桌面端可正常执行，但在手机Chrome浏览器中触发NetworkError，修改async: false后仍无法解决：

$.ajax({
    url: apiurl + '/sys/login',
    type: 'POST',
    async: false,
    cache: false,
    data: formData,
    processData: false,
    contentType: false,
    success: (res) => {
        if (typeof res.userName === 'string') {
            if (res.userName.trim().length > 0) {
                cs.writeCookie("loginstatus", `T|${res.userName}|${res.userId}|${res.employeeName}|${res.employeeId}`, 2);
                window.location.href = "/pages/kpis/msignin.html";
            }
        } else {
            console.log('login fail')
        }
    },
    error: (res) => {
        alert(JSON.stringify(res))
    }
})

手机Chrome报错信息：

{"readyState":0,"status":0,"statusText":"NetworkError: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'http://127.0.0.1/sys/login'"}

排查与解决建议 #

• 修正请求地址：手机端访问127.0.0.1指向的是手机本地，而非桌面服务器。需将apiurl替换为桌面服务器的局域网IP（如http://192.168.1.100）或公网域名，同时确保手机与服务器处于同一网络环境。
• 配置CORS跨域规则：若前端页面与API不在同一域名/端口，服务器需添加CORS响应头（如Access-Control-Allow-Origin: *或指定前端域名），移动端Chrome对跨域请求的校验比桌面端更严格。
• 放弃同步请求：现代浏览器（包括移动端Chrome）对同步XMLHttpRequest有严格限制，易导致请求阻塞。建议改回async: true，通过Promise或回调逻辑处理登录后的页面跳转。
• 统一协议避免混合内容：如果前端页面使用HTTPS，API必须也使用HTTPS，否则移动端Chrome会阻止HTTP请求。测试阶段可临时在Chrome设置中允许混合内容，生产环境需统一为HTTPS。
• 检查FormData构造：确认formData的字段是否完整、格式是否正确。若问题持续，可尝试改用JSON格式发送请求：设置contentType: 'application/json'，并将data转为JSON字符串（JSON.stringify(yourData)）。

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