通过ajax的jsonp方式实现跨域访问,并处理响应

一、场景描述

现有一个项目A,需要请求项目B的某个接口,并根据B接口响应结果A处理后续逻辑。

二、具体实现

1、前端

前端项目A发送请求,这里通过jsonp的方式实现跨域访问。

html 复制代码
       $.ajax({    
            url:'http://10.10.2.256:8280/ssoCheck',   //请求的url地址
            data:{'userId':'1'}, //参数
            dataType:"jsonp",   //返回格式为json
            type:"GET",   //请求方式
            jsonpCallback:"successCallBack"//回调方法

        });

注意,需要指定jsonp的回调方法jsonpcallback,这里我设置的回调方法名为successCallBack,所以相应的 要定义一个successCallBack方法。

html 复制代码
function successCallBack(data){
        //后端返回接口
       if (data && data.code == '200'){
          //自己逻辑
       }
    }

2、 后端

后端需要注意返回的json格式,必须严格返回 successCallBack({}) 格式的。

(successCallBack也就是前端配置的回调方法名),否则回调方法无法执行。

3、效果展示

相关推荐
用户8168694747251 分钟前
React 如何用 MessageChannel 模拟 requestIdleCallback
前端·react.js
izx8882 分钟前
从 Buffer 到响应式流:Vue3 实现 AI 流式输出的完整实践
javascript·vue.js·人工智能
heyCHEEMS3 分钟前
手搓 uniapp vue3 虚拟列表遇到的坑
前端
Duck不必5 分钟前
紧急插播:CVSS 10.0 满分漏洞!你的 Next.js 项目可能正在裸奔
前端·next.js
幸运小圣5 分钟前
动态组件【vue3实战详解】
前端·javascript·vue.js·typescript
用户413079810615 分钟前
终于不漏了-Android开发内存泄漏详解
前端
孟祥_成都6 分钟前
nest.js / hono.js 一起学!hono的设计思想!
前端·node.js
努力glow .7 分钟前
彻底解决VMware下ROS2中gazebo启动失败的问题
前端·chrome
阿笑带你学前端8 分钟前
开源记账 App 一个月迭代:从 v1.11 到 v2.2,暗黑模式、标签系统、预算管理全面升级
前端
AAA阿giao10 分钟前
浏览器底层探秘:Chrome的奇妙世界
前端·chrome·gpu·多进程·单进程·v8引擎·浏览器底层