Vue/nuxt3 3项目：(原因: cors标题‘访问控制-允许-原产地’缺失)。状态代码: 200
Vue/nuxt3 3项目：(原因: cors标题‘访问控制-允许-原产地’缺失)。状态代码: 200
提问于 2022-11-03 20:54:45
我目前正在使用Vue、nuxt3和javascript作为前端项目。
我现在的目标是创建一个函数，得到参数中给出的到城市的距离。所以我想使用google矩阵API。
这就是我想做的：
const getDistance = async (town, center) => {
const response = await fetch(
`https://maps.googleapis.com/maps/api/distancematrix/json?destinations=${town}&origins=${center}&units=imperial&key=API_KEY`
);
const data = await response.json();
console.log(data);
return data.rows[0].elements[0].distance.value;
};但是我一直在控制台上收到这个错误：
(reason: cors header ‘access-control-allow-origin’ missing). status code: 200我已经在谷歌上尝试过HTTPS链接请求，这是可行的，似乎错误不是来自我的API_KEY或其他什么。有人能帮我吗？
回答 3
Stack Overflow用户
发布于 2022-11-03 21:13:15
我认为使用Google客户端距离矩阵服务会更好地为您服务。
我认为只有在服务器端代码中才允许直接调用distancematrix端点。
请看这里的答案，因为我认为它可能适用于您所看到的问题：Google距离矩阵API返回CORS封锁
Stack Overflow用户
发布于 2022-11-03 21:16:25
由于CORS是客户端的限制，所以我认为服务器端应该使用这个api。所以正确的方法是使用为客户端设计的API。或者，您可以在服务器中公开使用该API的API，然后从客户端调用它。
Stack Overflow用户
发布于 2022-11-08 09:33:42
嘿，您可以在请求域的.htaccess文件中尝试这段代码。只是好奇，如果你是这两个域名的所有者？
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>另外，如果您尝试的是距离矩阵API，对于服务器端呈现，我建议您可以尝试另一种选择，它允许每个API调用5000个原点目标对。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74309446
复制相关文章
相似问题
腾讯云开发者
