JavaScript：如何创建JSONP？

php javascript json jsonp cross-domain

2022-08-30 12:10:09

我有两个域名，example1.com 和 example2.com

从 example1.com 开始，我想调用我在 example2.com 上的JSON API。知道这是不允许的，我想到了 - 这正是创建JSONP的原因。

问题是，如何修改我的 JSON API 以使其支持 JSONP？

基本上，如何创建回调 API？

更新

我的服务器端语言是 PHP

答案 1

这很简单。只需接受 GET 中调用的参数即可。callback

然后将回调 JavaScript 函数包装在数据周围。

PHP 示例：

<?php

$data = '{}'; // json string

if(array_key_exists('callback', $_GET)){

    header('Content-Type: text/javascript; charset=utf8');
    header('Access-Control-Allow-Origin: http://www.example.com/');
    header('Access-Control-Max-Age: 3628800');
    header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE');

    $callback = $_GET['callback'];
    echo $callback.'('.$data.');';

}else{
    // normal JSON string
    header('Content-Type: application/json; charset=utf8');

    echo $data;
}

它的想法是简单地返回一个JavaScript文件，该文件调用回调函数，JSON对象作为JavaScript回调函数的第一个参数。

您可以使用内置函数从 PHP 中的数组和对象创建 JSON 字符串（在上面的示例中包含）。json_encode()$data

要使用 JSONP 服务，您可以使用以下标签：<script>

<script>
    function receiver(data){
        console.log(data);
    }
</script>
<script src="data-service.php?callback=receiver"></script>

答案 2

你需要一个服务器端语言，回调参数只是一个GET参数，你读取参数，你把JSON响应包装成一个函数调用，然后像这样打印它。callback(jsonResponse);

我给你留下一个使用Python的非常简约的例子，因为你没有提到任何服务器端语言：

import os
import cgi

form = cgi.FieldStorage()
callback = form.getvalue('callback','')

address = cgi.escape(os.environ["REMOTE_ADDR"])

json = '{"ip": "'+address+'", "address":"'+address+'"}'

#Allow cross domain XHR
print 'Access-Control-Allow-Origin: *'
print 'Access-Control-Allow-Methods: GET'

if callback != '':
  print 'Content-Type: application/javascript'
  result = callback+'('+json+');'
else:
  print 'Content-Type: application/json'
  result = json

print ''
print result

这是一个小型JSONP服务的代码，用于检索Zach创建的客户端IP地址，它托管在Google App Engine上。