相关疑难解决方法(0)

TL;博士; 关于同源政策

我有一个Grunt进程,它启动了express.js服务器的实例.刚刚开始提供空白页面,并且Chrome中的开发人员控制台的错误日志中出现以下内容(最新版本),这一点工作非常精细:

XMLHttpRequest无法加载https://www.example.com/ 请求的资源上没有"Access-Control-Allow-Origin"标头.因此不允许来源" http:// localhost:4300 "访问.

什么阻止我访问该页面？

我使用的是Google Place API.

我希望得到关于类型帮助的地方的建议.

所以,我所做的是 -

var Google_Places_API_KEY = "AIzaSyAK08OEC-B2kSyWfSdeCzdIkVnT44bcBwM";      //Get it from - https://code.google.com/apis/console/?noredirect#project:647731786600:access
var language = "en";        //'en' for English, 'nl' for Nederland's Language


var Auto_Complete_Link = "https://maps.googleapis.com/maps/api/place/autocomplete/json?key="+Google_Places_API_KEY+"&types=geocode&language="+language+"&input=Khu";
$.getJSON(Auto_Complete_Link , function(result)
{
    $.each(result, function(i, field)
    {
        //$("div").append(field + " ");
        //alert(i + "=="+ field);
        console.error(i + "=="+ field);
    });
});

所以我要求的链接是 -

https://maps.googleapis.com/maps/api/place/autocomplete/json?key=AIzaSyAK08OEC-B2kSyWfSdeCzdIkVnT44bcBwM&types=geocode&language=en&input=Khu

如果我使用浏览器访问此链接,我可以获得类似的输出(请尝试ck​​) -

但是,如果我尝试使用jQuery的.getJSON或.ajax,我会通过此消息阻止我的请求 -

.

因此,XMLHTTPRequest被阻止 -

请求的资源上不存在"Access-Control-Allow-Origin"标头.因此不允许原点'null'访问.

我已经在StackOverflow中检查了这个问题的解决方案并通过这里,[这里4和这里,但无法完美地得到我的解决方案.

有谁能请赐教？

我试图了解CORS.根据我的理解,它是一种在浏览器中实现的安全机制,以避免除了用户打开的域之外的任何ajax请求(在url中指定)

现在,由于这种限制,实施了许多CORS以使网站能够进行跨源请求.但根据我的理解,实施CORS违反了"同源政策" SOP的安全目的

CORS只是为了提供对请求服务器想要服务的额外控制.也许它可以避免垃圾邮件发送者

来自维基百科:

要启动跨源请求,浏览器会使用Origin HTTP标头发送请求.此标头的值是为页面提供服务的站点.例如,假设http://www.example-social-network.com上的页面 试图访问online-personal-calendar.com中的用户数据.如果用户的浏览器实现了CORS,则会发送以下请求标头:

来源:http://www.example-social-network.com

如果online-personal-calendar.com允许请求,它会在其响应中发送一个Access-Control-Allow-Origin标头.标头的值指示允许的源站点.例如,对先前请求的响应将包含以下内容:

Access-Control-Allow-Origin:http://www.example-social-network.com

如果服务器不允许跨源请求,则浏览器将向example-social-network.com页面而不是online-personal-calendar.com响应发送错误.

要允许访问所有页面,服务器可以发送以下响应头:

Access-Control-Allow-Origin:*

但是,这可能不适合担心安全问题的情况.

我在这里失踪了什么？CORS保护服务器与保护客户端安全的意图是什么.

在我正在处理的这个项目中，我正在尝试使用来自 Google Places API 的照片来扩充我所拥有的公共艺术品照片集。这里表示您可以发送详细信息请求来获取十张照片的数组。最终，我将解压响应以获取每张照片的 Google照片参考，并对数组中的每张照片发出请求并显示它。

不幸的是，当我发送详细信息请求时，这个计划就中断了。这就是我收到的确切错误：

Fetch API cannot load https://maps.googleapis.com/maps/api/place/details/json?placeid=ChIJ5zf5lfXKRIYR8rPafbwaL68&key=MY_API_KEY. 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://localhost:4040' is therefore not allowed access. 
If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

我从本地主机运行这个程序，我很确定这很重要。我的所有其他 API 调用（Google Maps API 和其他几个）都是按照原样编写的，所以我有点困惑为什么会收到错误。这是相关代码：

The actual API call:

export function getPhotos(placeID) {
  let obj = {
    method: 'GET'
  };
  return fetch('https://maps.googleapis.com/maps/api/place/details/json?placeid=' + placeID + '&key=MY_API_KEY')
    .then((response) …

我正在尝试对谷歌地图 API 执行一个简单的 GET 请求，但我的浏览器一直阻止响应。我在控制台中收到以下警告：

跨源读取阻止 (CORB) 阻止了跨源响应https://maps.googleapis.com/maps/api/distancematrix/json?units=imperial&origins=address1&destinations=address2&key=api_key与 MIME 类型 application/json。有关更多详细信息，请参阅https://www.chromestatus.com/feature/5629709824032768。

为了阅读方便，我审查了地址和 api 密钥。

这是我的 JavaScript 代码：

$.ajax({
    url: https://maps.googleapis.com/maps/api/distancematrix/json?units=imperial&origins=address1&destinations=address2&key=api_key,
    type: "GET",
    dataType: 'jsonp',
    cache: false
  });