美文网首页
跨域方法(2)-jsonp跨域

跨域方法(2)-jsonp跨域

作者: 牛奶大泡芙 | 来源:发表于2018-12-12 16:10 被阅读0次

jsonp是跨域方法的一种,就是json pending,即对json的补充。
jsonp是一种特殊的协议,前后台约定了get方法的参数,默认callback,后台会把原本的json对象换成js代码,返回给前端,js代码中的函数是callback对应参数,js代码中的参数是后台json数据
jsonp虽然是利用script标签的src属性,不受浏览器同源策略的检查,但是仍然需要后台的配合
比如在java spring框架中,后台需要对callback参数名进行规定

@ControllerAdvice
public class JsonpAdvice extends AbstractJsonpResponseBodyAdvice
  public JsonpAdvice() {
    super("callback"); // 意味着前端get请求参数是“callback”
  }

比如ajax自动生成的script标签

$.ajax ({
  url: base + '/get',
  jsonp: 'callback',
  dataType: 'jsonp',
  success: function(json) {
  }
})

发出这个jsonp请求之后,html会在head中插入一个script标签

<script async src="http://localhost:8080/get?callback=jquery123&_=123"></script>

jsonp的弊端是
1、请求的类型不是xhr,而是script
2、仅支持get请求
3、后台要相应修改,支持callback参数

相关文章

  • 跨域处理

    跨域 1、什么是跨域 2、跨域方法2.1 JSONP2.2 CORS2.3 window.postMessage2...

  • 浏览器跨域问题,教你手写实现jsonp跨域

    跨域概述为什么会有跨域跨域解决办法:1、jsonp;2、后台代理手写实现jsonp跨域(包括服务器端代码) 跨域问...

  • JavaScript - GET/POST及跨域方法

    xhr 原生方法请求 window fetch 方法 关于跨域 利用JSONP实现跨域调用 使用 CORS(跨域资...

  • AJAX跨域解决方案

    跨域方法:1、跨子域iframe2、JSONP缺点:只支持get方法;后端代码要调整3、CORS本地如何模拟跨域修...

  • 前端如何解决常见跨域问题

    跨域解决方案 1、 通过jsonp跨域 2、 document.domain + iframe跨域 3、 loca...

  • Vue 项目解决跨域问题

    vue 项目中解决接口跨域的方法 1.简单粗暴直接用jquery 的jsonp 来调用跨域跨域接口 2.如果本地引...

  • 跨域

    本文介绍跨域的八种方法: JSONP只要说到跨域,就必须聊到 JSONP,JSONP全称为:JSON with P...

  • 什么是跨域?跨域有几种实现形式:

    跨域指的是跨过同源策略,实现不同域之间进行数据交互的过程叫跨域。跨域的实现形式主要有JSONP方法、CORS方法、...

  • 跨域

    跨域指的是跨过同源策略,实现不同域之间进行数据交互的过程叫跨域。跨域的实现形式主要有JSONP方法、CORS方法、...

  • 复习jsonp和promise

    一.jsonp 1.jsonp是跨域访问api,ajax不能跨域 2.在vue中使用jsonp首先要安装jsonp...

网友评论

      本文标题:跨域方法(2)-jsonp跨域

      本文链接:https://www.haomeiwen.com/subject/rlmuhqtx.html