通过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、效果展示

相关推荐
鶴哥只手遮天8 分钟前
Vue 3 核心源码深度剖析系列(v3.5.44)-第 1 章 项目全景:monorepo 架构与工程化体系
前端·vue.js·开源
流星。。方14 分钟前
小团队官网SEO落地:前端语义化与静态生成的工程实践
前端·状态模式
用户5304297657922 分钟前
盘点危化品搬运诊断的6类工具与自处理边界判断
前端
curtain26 分钟前
从古法编程到 Agent:我入行这两年,AI 改变了什么
前端·openai
zyfts34 分钟前
10分钟自制Codex钉钉通知Skill:AI干完活自动钉钉提醒你
前端
大孜然43 分钟前
孜然QQ频道自动化程序机器人配置教程
前端
用户4693849215543 分钟前
AIUI 焦点高亮切换失效排查与规避:为什么按钮不变换形态呢?
前端
派大鑫wink1 小时前
纯前端实现软考中级·软件设计师备考学习网站
前端·学习
kyriewen1 小时前
我扒了 npm 三年数据:AI 没把依赖变胖,是把包变多了
前端·人工智能·程序员
SensorFlow1 小时前
曝光埋点别放在组件渲染里:连续可见与去重范围怎么验收
javascript