React表单提交用axios调用Node.js后端/updateServices接口未触发求助

核心问题：then 方法传参语法错误（直接导致请求未发送就跳转） #

你编写的axios调用代码存在语法逻辑错误：

axios
  .post(`/updateServices`, selections) 
  .then(() =>
          console.log("updating"),
          window.location = "/admin/services"
  )

这里的逗号会被JavaScript解析为给then方法传递两个独立参数：

• 第一个参数：请求成功的回调函数 () => console.log("updating")
• 第二个参数：直接执行的表达式 window.location = "/admin/services"

JavaScript执行代码时会先计算所有参数的值再传入函数，所以不管axios请求有没有发起、有没有返回结果，window.location赋值语句会立刻执行，页面直接跳转，请求直接被中断，自然不会触达后端。

修复方案：把多个执行逻辑放到箭头函数的大括号包裹的代码块中：

axios
  .post(`/updateServices`, selections) 
  .then(() => {
    console.log("updating")
    window.location = "/admin/services"
  })
  .catch(function(error) {
    // alert(error)
    window.location = "/admin/services/new"
  })

其他可能导致请求异常的问题 #

如果修复上述错误后仍然无法触达后端，检查以下两点：

• 你直接使用/updateServices作为请求地址，默认会请求当前前端页面所在的域名+端口，如果后端服务和前端开发服务端口不一致，需要配置axios的baseURL指向后端服务地址，或者配置开发代理转发请求到后端。
• 后端需要配置跨域资源共享（CORS）规则，允许前端域名的请求访问，否则请求会被浏览器同源策略拦截，不会发送到后端。
• 你的下拉选择框没有设置默认选中值，初始state.siteLocation为空，建议提交前增加字段非空校验，避免传无效参数给后端。

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