jsonp发送请求

axios发送请求

axios发送请求,我们常常用它请求接口,但是如果我们的协议名为http时却需要请求https的接口,这时导致我们请求失败,原因::

1.因为浏览器有同源策略问题
2.因为https需要证书,,而我们axios请求时不能携带证书

jsonp请求接口

1.jsonp发送请求,原理就是去请求别的页面的js脚本文件,那获取页面的数据。
vue 使用jsonp发送请求,并接收返回回来的结果

安装依赖

npm i  vue-jsonp

mian.js引用jsonp

import {VueJsonp} from 'vue-jsonp'
Vue.use(VueJsonp)

案例,请求腾讯地图查找位置所在经纬度

if (flag && this.maoObj.address != '') {
                var markers = new TMap.MultiMarker({
                    map: this.map,
                    geometries: [],
                });
                let url = 'https://apis.map.qq.com/ws/geocoder/v1';
                this.$jsonp(url, {
                    key: '你的keyP',
                    address: this.maoObj.address,
                    output: 'jsonp'
                })
                    .then(res => {
                        let { lat, lng } = res.result.location;
                        this.drawingMap(lat, lng, this.maoObj.isFlag);
                    })
                    .catch(err => {
                        console.log(err);
                    });
            }
            this.maoObj.switch = !flag;
<think>我们正在讨论Hutool发送JSONP请求。首先,JSONP是一种跨域数据请求的解决方案,它通过动态创建`<script>`标签来请求数据,服务器返回的是一段JavaScript函数调用,函数名由客户端指定,数据作为参数传递给该函数。Hutool是一个Java工具库,它提供了丰富的工具方法,包括HTTP请求工具HttpUtil。然而,HttpUtil本身并不直接支持JSONP,因为JSONP是一种特定的跨域技术,通常由前端实现。但是,我们可以通过Hutool发送GET请求,并处理返回的JavaScript代码(即JSONP响应),然后提取其中的数据。步骤:1.构建JSONP请求URL:通常需要在URL中指定回调函数名,例如`callback=myCallback`。 2.使用Hutool的HttpUtil发送GET请求。 3.获取响应内容,它应该是一个JavaScript函数调用的字符串,例如:`myCallback({...})`。4.解析这个字符串,提取出JSON数据部分。注意:由于JSONP返回的是JavaScript代码,我们需要将其中的JSON对象提取出来。这可以通过正则表达式或者字符串操作来实现。示例:假设我们要请求JSONPURL是:`http://example.com/data?callback=myCallback` 使用Hutool发送请求并处理响应:```javaimportcn.hutool.http.HttpUtil;public classJsonpExample {publicstatic voidmain(String[] args) {//设置回调函数名Stringcallback ="myCallback";Stringurl ="http://example.com/data?callback=" +callback;//发送GET请求Stringresponse =HttpUtil.get(url);//现在response的内容类似于:myCallback({"key":"value"});//我们需要提取出JSON部分:{"key":"value"}//使用正则表达式提取JSON字符串//注意:这里假设返回的JSON对象是完整的,且没有嵌套函数调用等复杂情况String jsonStr= response.replaceFirst("^" +callback +"\\(","").replaceFirst("\\);?$","");//现在jsonStr就是纯JSON字符串,可以使用Hutool的JSONUtil解析//使用JSONUtil解析cn.hutool.json.JSONObjectjson =cn.hutool.json.JSONUtil.parseObj(jsonStr);System.out.println(json);} }``` 但是,这种方法依赖于回调函数名和返回的格式。如果返回的格式有变化(比如有换行、空格等),可能需要更健壮的正则表达式。 另外,如果服务器返回的JSONP响应中回调函数名是动态的,我们可以使用相同的方式,只需将回调函数名替换为我们实际使用的即可。 注意:JSONP通常用于跨域请求,但只能使用GET方法,且存在一定的安全风险(如XSS攻击)。现在更推荐使用CORS(跨域资源共享)来实现跨域请求。 如果上述方法在提取JSON字符串时遇到问题(比如返回的内容有换行等),我们可以使用更灵活的正则表达式:```javaimportjava.util.regex.Matcher; importjava.util.regex.Pattern; //... //使用正则表达式匹配JSON字符串Patternpattern =Pattern.compile("^" +Pattern.quote(callback)+ "\\((.*)\\);?$", Pattern.DOTALL);Matchermatcher= pattern.matcher(response);if (matcher.find()){jsonStr= matcher.group(1); }``` 这样,即使字符串中有换行(使用Pattern.DOTALL模式,`.`可以匹配换行符),也能正确提取。但是,请注意,如果JSONP返回的内容中包含函数调用或者复杂的结构,这种方法可能不够健壮。因此,确保你了解服务器返回的确切格式。 另外,如果服务器返回的JSONP响应中,回调函数名不是固定的(比如由客户端随机生成),那么我们在构建URL时指定回调函数名,然后按照同样的方法提取即可。 总结:Hutool没有直接提供JSONP的支持,但我们可以通过发送GET请求并处理响应字符串来模拟JSONP请求。相关问题:1.Hutool中如何发送POST请求并处理JSON响应?2.除了JSONP,还有哪些跨域数据请求的方法?3.Hutool的HttpUtil还支持哪些HTTP请求方法?</think>### Hutool发送JSONP请求的方法 JSONPJSON with Padding)是一种跨域数据请求技术,通过动态创建`<script>`标签实现跨域数据获取。Hutool的`HttpUtil`工具类可直接发送JSONP请求,以下是具体实现方法: #### 方法步骤 1. **构建请求URL**:在URL中添加`callback`参数指定回调函数名 2. **发送GET请求**:使用`HttpUtil.get()`获取响应 3. **提取JSON数据**:通过字符串处理提取JSON部分 #### 完整示例代码 ```java import cn.hutool.http.HttpUtil; public class JsonpRequestDemo { public static void main(String[] args) { // 1. 构建JSONP请求URL(示例API) String callback = "handleResponse"; // 自定义回调函数名 String url = "https://api.example.com/data?callback=" + callback; // 2. 发送GET请求 String response = HttpUtil.get(url); // 3. 提取JSON数据(移除回调函数包装) // 响应格式示例:handleResponse({"data": "value"}); String jsonData = response .replaceFirst(callback + "\\(", "") // 移除函数名和左括号 .replaceFirst("\\);?$", ""); // 移除右括号和分号 System.out.println("解析后的JSON数据: " + jsonData); } } ``` #### 关键说明: 1. **回调函数名**:自定义的`callback`参数值需与服务器约定 2. **数据提取原理**: ```text 原始响应: handleResponse({"key": "value"}); 处理后: {"key": "value"} ``` 3. **跨域支持**:JSONP通过`<script>`标签规避浏览器的同源策略[^1] #### 注意事项 1. **仅支持GET请求**:JSONP本质是通过`<script>`加载资源 2. **安全风险**:需信任数据来源,存在XSS攻击风险 3. **现代替代方案**:推荐优先使用CORS(跨域资源共享)[^2] --- ### 相关问题 1. Hutool如何处理JSONP响应中的特殊字符转义问题? 2. 如何用Hutool实现JSONP请求超时和重试机制? 3. JSONP与CORS跨域方案的主要区别是什么? 4. Hutool中是否有直接解析JSONP响应的工具方法? [^1]: JSONP利用`<script>`标签不受同源策略限制的特性实现跨域请求 [^2]: CORS是现代浏览器支持的更安全的跨域解决方案,通过HTTP头控制访问权限
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值