如何将动态输入值传入URL？GET请求传参及CORS等问题排查

1. 模板字符串语法错误 #

你写的请求URL用了单引号包裹，导致${email.value}和${pass.value}没有被解析成真实的输入值，直接作为字符串拼到了URL里——这就是错误日志里URL显示email=${email.value}的原因。

解决方法：把单引号换成反引号`，同时用encodeURIComponent处理参数，避免特殊字符导致的URL乱码：

const requestURL = `http://localhost:8080/users/login?email=${encodeURIComponent(email.value)}&password=${encodeURIComponent(pass.value)}`

2. CORS跨域访问限制 #

错误提示No 'Access-Control-Allow-Origin' header，说明你的后端没有配置跨域权限，浏览器阻止了前端（localhost:63342）向后端（localhost:8080）的跨域请求。

解决方法：在后端添加跨域响应头，比如：

• 如果是Spring Boot后端，在接口类上添加@CrossOrigin(origins = "http://localhost:63342")
• 如果是Node.js/Express后端，安装cors中间件并配置允许的源
• 通用方式：让后端返回Access-Control-Allow-Origin: http://localhost:63342（或者用*允许所有源，生产环境不推荐）

3. 请求错误处理逻辑漏洞 #

你的xhr.onerror回调里用了resolve(xhr.response)，但请求失败时xhr.response是null，这会导致then回调里尝试读取data.email时抛出Cannot read properties of null的错误。

解决方法：把错误回调里的resolve改成reject，同时给Promise加上catch捕获错误：

xhr.onerror = () => {
  reject(new Error('网络请求失败'))
}

// 调用时添加catch
sendRequest("GET", requestURL)
  .then((data) => {
    alert('登录成功')
    window.location.href = '#routeToHomePage'; 
  })
  .catch(err => {
    alert(`登录失败：${err.message || JSON.stringify(err)}`)
  })

另外，onload里的return error = true是无效代码，直接删掉即可。

4. 安全性问题：登录用GET请求风险高 #

GET请求的参数会暴露在URL、浏览器历史记录和服务器日志里，密码泄露风险极大，建议改成POST请求，把参数放在请求体里：

// 修改sendRequest函数支持POST请求体
const sendRequest = (method, url, data = null) => {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest()
    xhr.open(method, url);
    xhr.responseType = 'json'
    // POST请求设置Content-Type
    if (data) {
      xhr.setRequestHeader('Content-Type', 'application/json');
    }
    xhr.onload = () => {
      if (xhr.status >= 400) {
        reject(xhr.response || new Error(`请求错误：${xhr.status}`))
      } else {
        resolve(xhr.response)
      }
    }
    xhr.onerror = () => {
      reject(new Error('网络请求失败'))
    }
    // 发送JSON格式的请求体
    xhr.send(data ? JSON.stringify(data) : null);
  })
}

// 调用POST请求
sendRequest("POST", 'http://localhost:8080/users/login', {
  email: email.value,
  password: pass.value
})
.then((data) => {
  alert('登录成功')
  window.location.href = '#routeToHomePage'; 
})
.catch(err => {
  alert(`登录失败：${err.message || JSON.stringify(err)}`)
})

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