1.JSONP原理
1.1.动态脚本注入
说明：通过创建 <script> 标签绕过浏览器同源策略
1.2.回调约定
说明：服务端返回 函数名(JSON数据) 格式的JS代码
1.3.自动执行
说明：浏览器加载脚本后立即触发前端预定义的回调函数（现代开发建议优先使用 CORS 替代）
2.测试接口
说明：apifox测试接口，响应成功。
3.安装依赖
npm i jsonp
4.代码实现
说明：组件案例
<script setup>
import jsonp from "jsonp"; // 导入jsonp库用于跨域请求
import {onMounted} from "vue"; // 导入Vue生命周期钩子// 最短路径分析函数
async function shortestPathAnalysis(baseUrl, pointArr){return new Promise((resolve, reject) => {// 请求参数配置const params = {hasLeastEdgeCount: false, // 是否按最少弧段数查找parameter: JSON.stringify({ // 将分析参数转为JSON字符串resultSetting: { // 结果返回设置returnEdgeFeatures: null, // 不返回弧段属性returnEdgeGeometry: null, // 不返回弧段几何信息returnEdgeIDs: null, // 不返回弧段IDreturnNodeFeatures: null, // 不返回结点属性returnNodeGeometry: null, // 不返回结点几何信息returnNodeIDs: null, // 不返回结点IDreturnPathGuides: null, // 不返回路径引导信息returnRoutes: true // 返回路径结果},weightFieldName: "length", // 使用长度作为权重字段barrierEdgeIDs: null, // 障碍弧段IDbarrierNodeIDs: null, // 障碍结点IDbarrierPoints: null, // 障碍点turnWeightField: null // 转向权重字段}),nodes: JSON.stringify(pointArr), // 将坐标点数组转为JSON字符串sectionCount: '1', // 分段数sectionIndex: '0' // 分段索引};// 将参数对象转换为查询字符串const queryString = Object.entries(params).map(([key, value]) => `${key}=${encodeURIComponent(value)}`) // 对每个值进行URL编码.join('&'); // 用&连接所有参数const url = `${baseUrl}?${queryString}`; // 拼接完整URL// 发起JSONP请求jsonp(url, {param: 'callback', // 回调参数名timeout: 100000 // 超时时间100秒}, (err, data) => {if (err) {reject(err); // 错误时拒绝Promisereturn;}resolve(data); // 成功时解析Promise});});
}// 测试请求函数
const orderRequest = async () => {// 调用最短路径分析，传入服务地址和两个坐标点let result = await shortestPathAnalysis("https://iserver.supermap.io/iserver/services/transportationanalyst-sample/rest/networkanalyst/RoadNet@Changchun/path.jsonp",[{"x": 4494.7646522178, "y": -4672.6392297989}, // 起点坐标{"x": 4504.7354942047, "y": -4679.9418182963} // 终点坐标])
}// 组件挂载后自动执行测试请求
onMounted(() => {orderRequest()
})
</script><template><!-- 空模板 -->
</template><style scoped>
/* 空样式 */
</style>5.响应效果
说明：响应成功