Javascript 跨域 JSON

Question

您好，我正在尝试仅使用 JavaScript 和 HTML 从 URL 读取 json 对象。我正在使用以下代码:

function getJSONP(url, success) {

    var ud = '_' + +new Date,
        script = document.createElement('script'),
        head = document.getElementsByTagName('head')[0]
            || document.documentElement;

    window[ud] = function(data) {
        head.removeChild(script);
        success && success(data);
    };

    script.src = url.replace('callback=?', 'callback=' + ud);
    head.appendChild(script);
}

getJSONP('http://webURl?&callback=?', function(data){
    console.log(data);
});

如您所料，我得到的是 Not at same origin as the document, and parent of track element does not have a 'crossorigin' 属性。因此不允许访问 Origin 'null'。

仅供引用，服务器返回 JSON 数据并且没有回调函数。

为您的帮助干杯。

Answer 1

服务器要么需要使用如下 header 启用 CORS:(这里的答案归功于:CORS with php headers)

// Allow from any origin
if (isset($_SERVER['HTTP_ORIGIN'])) {
    header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}");
    header('Access-Control-Allow-Credentials: true');
    header('Access-Control-Max-Age: 86400');    // cache for 1 day
}

// Access-Control headers are received during OPTIONS requests
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {

    if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD']))
        header("Access-Control-Allow-Methods: GET, POST, OPTIONS");         

    if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']))
        header("Access-Control-Allow-Headers: {$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}");

    exit(0);
}

或者服务器需要像这样输出JSONP:

echo $_GET['callback'] . '(' . json_encode($whatever) . ')';

如果这不在您自己的服务器上，另一种选择是在您自己的服务器上创建一个 PHP 文件，该文件在您需要读取的 url 上执行 filegetcontents(使用不带 cors 的 JSON 数据)和以 JSONP 格式回显相同的数据。然后，您可以在纯 javascript getJSON 函数中使用这个新的 PHP 文件 (url)。

中间没有服务器或者cors或者jsonp是不行的。