Javascript CORS JSON/JSONP 请求

Question

我浏览了大多数 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 显示红色 200 空响应。

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

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

Answer 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 header )。 http://ip.jsontest.com/?mime=2做。您对此无能为力——这取决于服务器。

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