SpringBoot实现jsonp跨域通信的方法示例

下面是“Spring Boot实现jsonp跨域通信的方法示例”的完整攻略：

什么是 JSONP

JSONP（JSON with Padding）是一种跨域数据传输方法，它利用script标签的跨域能力，在服务端动态生成一个js文件然后返回给客户端，客户端通过调用该js文件进行数据处理。

实现 JSONP 的步骤

1. 创建 Spring Boot 项目

使用idea或者Eclipse等工具创建一个Spring Boot项目，添加web依赖

2. 创建控制器

创建一个简单的控制器，用于处理请求。例如：

@RestController
public class JsonpController {

    @GetMapping("/jsonp")
    public String jsonp(@RequestParam("callback") String callback) {
        return callback + "({\"msg\": \"Hello, Jsonp\"})";
    }
}

3. 启用 CORS

我们需要允许应用程序可以跨域请求当前 controller 中的 URL，默认情况下，Spring Boot是禁止跨域操作的，我们在自己在配置文件 application.properties 中显式开启：

# 防止跨域攻击
security.csrf.enabled=false
# 允许跨域访问的地址
cors.allowed-origins=*
# 允许跨域访问的方法
cors.allowed-methods=GET,POST,PUT,DELETE,OPTIONS

4. 调用 JSONP 服务

最后，我们需要在前端创建一个函数用于发送JSONP请求到后端，例如：

function jsonp(url, callback) {
    let script = document.createElement('script');
    script.async = true;
    script.src = `${url}&callback=${callback}`;
    document.body.appendChild(script);
}
jsonp('http://127.0.0.1:8080/jsonp', 'callback');
function callback(data) {
    console.log(data);
}

以上就是实现 Spring Boot 实现 JSONP 跨域访问的全过程。

示例1：JSONP请求百度天气接口

下面通过一个实例来讲解如何使用 JSONP 请求百度天气 API。

1. 请求百度天气接口

http://api.map.baidu.com/telematics/v3/weather?location=北京&output=json&ak=你的 AK

其中，location 表示查询的城市，output 表示需要返回的数据格式，可选值为：xml 或 json。

注：需要在百度地图开放平台申请一个 AK，示例中的 AK 为伪造数据，无法使用，需要申请自己的 AK。

2. 编写 JSONP 请求方法

function jsonp(url, callback) {
    let script = document.createElement('script');
    script.async = true;
    script.src = `${url}&callback=${callback}`;
    document.body.appendChild(script);
}
jsonp('http://api.map.baidu.com/telematics/v3/weather?location=北京&output=json&ak=你的AK', 'callback');
function callback(data) {
    console.log(data);
}

3. 解析 JSONP 返回数据

由于 JSONP 请求成功后，服务端返回的一定是一段包含 JSON 数据调用函数的脚本，所以我们需要解析出传回的 JSON 数据，再进行操作。

function jsonp(url, callback) {
    let script = document.createElement('script');
    script.async = true;
    script.src = `${url}&callback=${callback}`;
    document.body.appendChild(script);
}
jsonp('http://api.map.baidu.com/telematics/v3/weather?location=北京&output=json&ak=你的AK', 'callback');
function callback(data) {
    let weather = data.results[0].weather_data[0];
    console.log(`${weather.date}\n${weather.temperature}\n${weather.weather}`);
}

通过以上步骤，我们就可以通过 JSONP 的方式请求百度天气接口了。

示例2：JSONP 调用 Github API

下面通过一个实例来讲解如何使用 JSONP 请求 Github API。

1. 请求 Github API

Github API 提供了很多接口，示例中使用了获取 Github 用户名为 guoguodong 的用户信息的接口：

https://api.github.com/users/guoguodong

2. 编写 JSONP 请求方法

function jsonp(url, callback) {
    let script = document.createElement('script');
    script.async = true;
    script.src = `${url}&callback=${callback}`;
    document.body.appendChild(script);
}
jsonp('https://api.github.com/users/guoguodong', 'callback');
function callback(data) {
    console.log(data);
}

3. 解析 JSONP 返回数据

function jsonp(url, callback) {
    let script = document.createElement('script');
    script.async = true;
    script.src = `${url}&callback=${callback}`;
    document.body.appendChild(script);
}
jsonp('https://api.github.com/users/guoguodong', 'callback');
function callback(data) {
    console.log(`${data.login}, ${data.html_url}`);
}

通过以上步骤，我们就可以使用 JSONP 的方式请求 Github API 了。

以上就是两个不同 API 接口下的 JSONP 跨域示例。