Javascript CORS JSON/JSONP 请求

Posted 2023-03-04

【中文标题】Javascript CORS JSON/JSONP 请求

【英文标题】：Javascript CORS JSON/JSONP Request

【发布时间】：2013-11-18 05:34:45

【问题描述】：

我浏览了大多数 CORS 和 JSON 请求主题，但无法理解为什么第一个脚本有效，而第二个则无效。我很想接受有关 CORS 和 javascript 以及 XMLHTTPRequest2 和 AJAX 的教育。

这行得通：

function wfs() 
 var url = 'http://routes.cloudmade.com/8ee2a50541944fb9bcedded5165f09d9/api/0.3/51.22545,4.40730,%5B51.22,4.41,51.2,4.41%5D,51.23,4.42/car.js?lang=de&units=miles&callback=getRoute';
 var script = document.createElement('script');
 script.type="text/javascript";
 script.src=url;
 document.getElementsByTagName('head')[0].appendChild(script);


function getRoute(response) 
 console.log(response);

这不起作用：

function wfs() 
 var url = 'http://routes.cloudmade.com/8ee2a50541944fb9bcedded5165f09d9/api/0.3/51.22545,4.40730,%5B51.22,4.41,51.2,4.41%5D,51.23,4.42/car.js?lang=de&units=miles';
 var xhr = new XMLHttpRequest();
 xhr.open('GET', url, true);
 xhr.onload = function(e) 
  if (this.status == 200) 
    var json = this.response;
    console.log(json);
  
 ;

 xhr.send();

Firebug 显示 Red 200 Null 响应。

但是，当我使用不同的 url 时，第二个脚本确实有效：

var url = 'http://ip.jsontest.com/?mime=2';

【问题讨论】：

您的cloudmade.com 响应可能没有发送带有Access-Control-Allow-Origin 标头的CORS 权限，因此不允许请求源读取资源内容。但是，<script> 标签允许您在没有 CORS 权限的情况下执行跨域脚本资源（但不能读取它们的内容）。

【参考方案1】：

第一个域 http://routes.cloudmade.com/8ee2a50541944fb9bcedded5165f09d9/api/0.3/51.22545,4.40730,%5B51.22,4.41,51.2,4.41%5D,51.23,4.42/car.js?lang=de&units=miles 没有实现 CORS（即不发送可用的 Access-Control-Allow-Origin 标头）。 http://ip.jsontest.com/?mime=2 确实如此。您对此无能为力——这取决于服务器。

第一个代码块使用 JSONP。这实际上是在文档中注入一个脚本标签。脚本标签可以有外部来源（如果它们不是相同的方案，出于安全原因，它们可能会被阻止）。这允许服务器实质上向您发送 JavaScript 代码，这些代码您插入到立即运行的 <script> 中。

【讨论】：

我理解 JSONP 的回调，这就是我如何摆动它来工作。 cloudmade.com/documentation/routing 告诉我服务返回 JSON 或 GPX 格式。如果它不允许 CORS，脚本/应用程序应该如何查询而不每次手动输入 lat/long 参数？是不是应用程序在浏览器之外执行代码，所以对“跨域”请求的检查较少？

@Barrett 我不明白你的实际问题。你是什​​么意思“没有手动输入纬度/经度参数？”不然你会怎么做？我也不知道你所说的“对跨域请求的检查更少”是什么意思，或者这两个问题是如何关联的

我为缺乏上下文而道歉。您看到的 url 是硬编码的，用于测试目的，当用户单击地图时，我在网站上使用 Leafletjs 来获取纬度/经度位置。我将此请求发送到 cloudmade 以获取我解析并转换为地图上从 A 点到 B 点的线要素的路线。在您给我答案后很难澄清。我很满意。将来，我会更广泛地回答我最初的问题。感谢您的意见。