React JS Async函数在自己的文件中正常工作，但在导出时就不正常了

Question

我已经在自己的stackoverflow上尝试了几个小时，试图解决这个问题，但无济于事。

所以我试图使用旅行时间作为计算的一部分，我正在做的前端逻辑反应，而它在自己的文件中工作，我得到一个axios错误时，导出到一个单独的组件，并试图记录那里的数据。下面是子组件，只是一个函数，它接受出发地和目的地，并返回旅行持续时间:

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;

但是当我导出/导入在搜索表单中使用时，我从日志中得到这个错误:

AxiosError{消息:'网络错误'，名称:'AxiosError'，代码:'ERR_NETWORK'，配置:{…}，请求:XMLHttpRequest，…}

下面是我导入的表单供参考:

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;

感谢所有能帮忙的人。

我现在只想能够打印到控制台，以确保该功能在其他组件中工作。

Answer 1

致任何可能会来的人:看起来这个问题是特定于通过我的浏览器发出API请求的，这解释了为什么它在VSCode中工作而不是通过Axios。为了解决这个问题，我安装了这个:允许CORS:访问-控制-允许-起源插件，遵循1分钟的视频方向，之后立即工作。希望这为你节省了我花在故障排除上的5个小时…