如何使用 Ajax Api 在 Google Distance Matrix API 中修复“跨源请求被阻止”[重复]

Posted 2023-03-04

【中文标题】如何使用 Ajax Api 在 Google Distance Matrix API 中修复“跨源请求被阻止”[重复]

【英文标题】：How to fix "Cross-Origin Request Blocked" in Google Distance Matrix API using Ajax Api [duplicate]

【发布时间】：2019-09-12 02:45:32

【问题描述】：

我一直在尝试使用距离矩阵从谷歌请求数据，但每次我请求它都会使用 AJAX API 抛出“跨源请求被阻止”。

每当我使用 PostMan 时，它都会正确返回。

$.ajax(
         type: "GET",
         url: "https://maps.googleapis.com/maps/api/distancematrix/json?units=imperial&origins=Obalende&destinations=Ikeja&mode=driving&departure_time=now&key=AIzaSyBTo0RgT_iA87Hd76gX8zYixB3PZh3z454",
         dataType: "json",
         crossDomain: true,
         cache: false,
         success: function(data)
         console.log(data);
  
)

这是返回的错误：

跨域请求被阻止：同源策略不允许读取位于https://maps.googleapis.com/maps/api/distancematrix/json?units=imperial&origins=Obalende&destinations=Ikeja&mode=driving&departure_time=now&key=AIzaSyBTo0RgT_iA87Hd76gX8zYixB3PZh3z454&_=1555970031620 的远程资源。 （原因：缺少 CORS 标头“Access-Control-Allow-Origin”）。

【参考方案1】：

要解决此问题，不要从本地文件运行，而是托管一个简单的 http 服务器，然后从那里访问您的页面。

在工作目录中的终端中使用以下命令，对于 Windows，请参阅此链接 microsoft simple http server

http-server -p 4090 .

将允许您进入浏览器并输入地址http://localhost:4090，使用这个简单的http服务器时不应该发生错误。如果您在页面中使用 php 并且需要为这些页面提供服务，请使用

php -S 127.0.0.1:4090

或者，在 Safari 中，启用开发者菜单，然后在其中单击以下选项