React异步函数单独文件正常，导出后调用报Axios网络错误

我写了一个distanceMatrix异步函数，单独运行时能正常调用Google Distance Matrix API并返回结果，但把它导入React的SearchForm组件调用时，就出现Axios网络错误（AxiosError: ERR_NETWORK）。目前只需要在控制台打印结果，确认函数在组件中能正常工作。

distanceMatrix函数代码 #

import axios from "axios";

const distanceMatrix = async (origins, destinations) => {
  const API_KEY = "A***********************Y";
  const url = new URL(
    "https://maps.googleapis.com/maps/api/distancematrix/json"
  );
  const params = new URLSearchParams({
    key: API_KEY,
    origins: origins,
    destinations: destinations,
    mode: "driving",
    departure_time: Date.now(),
    traffic_model: "pessimistic",
    units: "imperial",
  });

  url.search = params;
  try {
    const response = await axios.get(url);
    return response.data.rows[0].elements[0].duration_in_traffic.value;
  } catch (error) {
    console.log(error);
  }
};

export default distanceMatrix;

SearchForm组件代码 #

import distanceMatrix from "../calculations/distancematrix/distanceMatrix";
import React, { useState } from "react";

const SearchForm = () => {
  const [origin, setOrigin] = useState("");
  const [destination, setDestination] = useState("");

  const handleOrigin = (e) => {
    e.preventDefault();
    setOrigin(e.target.value);
  };

  const handleDestination = (e) => {
    e.preventDefault();
    setDestination(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    (async () => {
      const duration = await distanceMatrix(origin, destination);
      console.log(duration);
    })();
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        name="origin"
        placeholder="Origin"
        value={origin}
        onChange={handleOrigin}
      ></input>
      <input
        type="text"
        name="destination"
        placeholder="Destination"
        value={destination}
        onChange={handleDestination}
      ></input>
      <button type="submit">Search Route</button>
    </form>
  );
};

export default SearchForm;

可能的原因及解决办法 #

1. 跨域资源共享（CORS）限制 #

浏览器的同源策略会阻止前端直接调用外部域名的API，而你单独运行函数时应该是在Node.js环境（没有浏览器的同源限制），所以能正常请求。

解决办法：

• 后端代理：如果用Create React App，在package.json中添加代理配置：

  "proxy": "https://maps.googleapis.com"
  

  然后修改distanceMatrix的请求URL：

  const response = await axios.get("/maps/api/distancematrix/json", {
    params: { /* 原参数 */ }
  });
  

• 配置API密钥允许域名：在Google Cloud控制台找到你的API密钥，设置“应用限制”为HTTP referrers，添加前端项目的域名（比如http://localhost:3000），允许该域名发起请求。

2. Axios请求方式优化 #

直接传递URL对象给Axios.get可能存在兼容性问题，换成Axios自带的params参数传递更稳妥：

const distanceMatrix = async (origins, destinations) => {
  const API_KEY = "A***********************Y";
  try {
    const response = await axios.get("https://maps.googleapis.com/maps/api/distancematrix/json", {
      params: {
        key: API_KEY,
        origins: origins,
        destinations: destinations,
        mode: "driving",
        departure_time: Date.now(),
        traffic_model: "pessimistic",
        units: "imperial",
      }
    });
    return response.data.rows[0].elements[0].duration_in_traffic.value;
  } catch (error) {
    console.log(error);
  }
};

3. 检查输入值有效性 #

确保调用函数时origin和destination不为空，避免无效请求：

const handleSubmit = (e) => {
  e.preventDefault();
  if (!origin.trim() || !destination.trim()) {
    console.log("请输入有效的起点和终点");
    return;
  }
  (async () => {
    const duration = await distanceMatrix(origin, destination);
    console.log(duration);
  })();
};

4. 确认API密钥权限 #

在Google Cloud控制台的API库中，确认已经启用了Distance Matrix API，同时检查密钥的权限设置，确保没有被限制调用该API。

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