axios调用Firebase Stripe支付POST接口返回404错误求助

核心错误原因 #

报错显示请求地址为http://localhost:3000/payments/create，这是React前端开发服务的默认地址，没有命中你配置的Firebase云函数模拟器地址，问题由两处基础错误导致：一是自定义axios实例配置语法错误，二是前端组件调用了默认axios而非你封装的带baseURL的实例。

分步修复 #

• 修正axios.js配置语法错误
  对象属性赋值需用冒号而非等号，修正后代码：

import axios from 'axios';

const instance = axios.create({
  baseURL: 'http://localhost:5001/app-eea29/us-central1/api'  //baseurl从firebase emulator suite获取
})

export default instance;

• 修正Payment.js的axios导入逻辑
  你当前导入的是官方默认axios，没有携带自定义baseURL，需替换为你自己封装的axios实例：
  将原有import axios from 'axios';替换为（路径根据你项目中axios.js的实际存放位置调整，以下为同目录示例）：

import axios from './axios';

• 确认Firebase模拟器正常运行
  执行firebase emulators:start启动本地模拟器，确认Functions模块正常启动，显示的接口地址与你axios.js中配置的baseURL完全一致。

附加修复（避免后续功能异常） #

你当前Payment.js中的handleChange逻辑写错，会导致按钮禁用状态和错误提示异常，修正为：

const handleChange = e => {
    setDisabled(e.empty);
    setError(e.error ? e.error.message : '') // 错误信息赋值给error变量，而非disabled变量
}

修复完成后重启React开发服务，重新发起请求即可解决404问题。

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