Question

我正在尝试使用以JSON响应的api。但是我收到此错误：Cross-Origin Request Blocked：同源策略禁止读取远程资源。但是我能够在本地解析相同的json。

 function getData(lat,long) {

 var url = "http://utilities- oyorooms.herokuapp.com/api/v2/search/hotels?filters[coordinates][longitude]=" + long + "&filters[coordinates][latitude]=" + lat + "&filters[coordinates][distance]=20&fields=name,longitude,latitude,oyo_id&access_token=MXB2cE44LWJGaTViWExHQ0xCOC06VUtucEhhVV9mclNNeWdrNFBveFY=&additional_fields=room_pricing";

$.getJSON(url, function( data ) {

$(data).each(function( key, val ) {


$.each(val.hotels , function(k , v ){  
     alert(v.distance);




});        
});
});

 }

Answer 1

但是我能够在本地解析相同的json。

右。 SOP适用于浏览器制作跨源 ajax请求（以及其他一些浏览器内容，例如iframe，将图片加载到画布中，以及这样）。如果您将URL粘贴到地址栏中，则不受SOP的约束。如果您使用命令行中的curl或wget来检索它，则不受SOP的约束。但是，如果您在浏览器中使用ajax（let findCustomerId _ _ email = Data.Customers() |> Seq.tryFind (fun c -> System.String.Compare(email,c.email,true) = 0) |> function Some(c) -> c.id | None -> createGuest().id是ajax），则会受到SOP的约束。

你无法使用浏览器完全解决这个问题（这就是重点）。如果端点不支持CORS并允许您的来源向它发出请求（他们必须在服务器端进行操作），则无法通过带有ajax的浏览器执行此操作。

你可以通过设置自己的服务器，向服务器发出请求，让服务器调用其他服务器来获取数据来实现这一点，因为您的服务器不受SOP。如果你做了很多，如果端点不想要你，那么期望在某个阶段找到它们阻止服务器的IP。

如果您控制您正在呼叫的端点的服务器端，并希望从您的网页原点启用对其的访问权限，this answer会说明您将如何执行此操作（用伪代码）。

Answer 2

跨源请求策略阻止来自其他网站的Ajax请求。您有3个选项可以防止这种情况：

从与JSON-Backend相同的域+端口提供HTML / JS文件
构建代理服务器以提供JSON
将以下HTTP标头添加到后端：

Access-Control-Allow-Origin：http://foo.example

http://foo.example必须是为您的HTML / JS提供服务的网络服务器的网址

使用API

2 个答案:

使用API​​

2 个答案:

使用API