本地localhost环境如何通过axios GET请求传递URL路径参数

核心错误点 #

• URL缺失协议前缀会导致浏览器相对路径解析错误：如果不写http://，浏览器会把localhost:1323当成当前前端域名下的子路径，比如前端运行在http://localhost:3000时，实际请求地址会变成http://localhost:3000/localhost:1323/...，完全指向错误地址。
• 路径参数未编码：email包含@等特殊字符，不做URL编码会导致后端路由匹配失败。
• 跨域（CORS）拦截：前端React服务和Go API服务端口不一致，属于跨源请求，后端未配置CORS规则时浏览器会直接拦截请求，这也是加了http前缀依然请求失败的最常见原因。
• 代码写法冗余：async/await和.then()混用没有必要，增加维护成本。

分步修复 #

1. 先验证后端服务可用性
   直接在浏览器地址栏输入完整的测试接口地址，比如http://localhost:1323/profile/email/test@example.com/password/123456，确认能正常返回结果，排除后端服务未启动、路由写错的问题。

2. 修正前端axios请求代码
   提前配置axios基础路径，对路径参数做编码，简化异步写法：

import axios from 'axios'

// 创建axios实例，统一配置基础请求地址
const api = axios.create({
  baseURL: 'http://localhost:1323',
  timeout: 10000
})

export async function validLogin(email, password) { 
  // 对路径参数做URL编码，处理特殊字符避免路由匹配错误
  const encodedEmail = encodeURIComponent(email)
  const encodedPassword = encodeURIComponent(password)
  // 模板字符串拼接路径，直接await拿响应结果
  const response = await api.get(`/profile/email/${encodedEmail}/password/${encodedPassword}`)
  return response.data
}

3. 配置Go后端跨域规则
   跨域是浏览器的安全限制，必须在后端配置允许跨域的响应头，否则请求会被浏览器拦截：

   需要给接口响应添加以下头信息：

   • Access-Control-Allow-Origin: 本地调试时可临时设为*，生产环境替换为前端实际部署域名
   • Access-Control-Allow-Methods: GET, POST, OPTIONS
   • Access-Control-Allow-Headers: Content-Type
     注意：浏览器跨域请求前会先发OPTIONS方法的预检请求，后端需要对OPTIONS请求直接返回200状态码，不要做业务逻辑校验。

额外排查点 #

• 确认Go服务监听的是0.0.0.0:1323或者127.0.0.1:1323，没有绑定错误的网卡地址
• 确认后端路由定义的路径和请求路径完全一致，不要多写、漏写斜杠或路径段

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