美文网首页
跨域请求和JSONP

跨域请求和JSONP

作者: 祈粼 | 来源:发表于2017-04-27 12:58 被阅读0次

Cross Domain Request:从一个资源请求另一个资源,二者所在的请求地址不同,域名不同、端口号不同、请求协议不同。

提示:localhost和127.0.0.1也算跨域!

浏览允许跨域请求的情形

IMG、LINK、SCRIPT、IFRAME...

浏览禁止跨域请求的情形

XHR——浏览器处于安全考虑,禁用了XHR的跨域请求(其实服务器给出了响应消息,但浏览器不让使用)

如何解决浏览器的XHR跨域请求限制—— 八种方案:

(1)

(2)百度一下,你就知道

(3)

(4)

(5)

(6)

(7)修改响应消息头部,添加Access-Control-Allow-Origin头部

header(“Access-Control-Allow-Origin: 要跨域的url”)

(8)使用JSONP——非常巧妙

JSON:JavaScript Object Notation,是一种字符串数据格式(羊肉)。

JSONP:JSONwith Padding,填充式JSON,与JSON完全两码事,是一种使用JSON数据的方式(把羊肉红烧)。意思是在JSON字符串左右添加函数名:doResponse({"ename":"Tom", "age":20});

JSONP是专用于解决XHR跨域限制一种手段。基本原理:使用动态创建的一个SCRIPT标签代替XHR发起异步请求,要求服务器必须返回application/javascript,立即在客户端执行——要执行的函数本体在客户端浏览器中声明。

src="url" async>

async: 浏览器请求该script内容时不会阻塞当前页面中的内容

sync  同步

async 异步

服务器端接收客户端(页面)提交的callback

在用接收的callback的数据 包一下要实际要传输的数据

jQuery中如何使用JSONP发起异步请求:

(1)$.getJSON()

用途1:使用XHR发起异步请求(不能跨域)

$.getJSON('url', doResponse)

用途2:使用JSONP发起跨域异步请求

$.getJSON('http://跨域地址/?callback=?', doResponse)

第二个问号jQuery会动态创建一个函数名 这个函数名的作用就是自动调后面的函数(doResponse)

(2) $.ajax()

用途1:使用XHR发起异步请求(不能跨域)

$.ajax({  })

用途2:使用JSONP发起跨域异步请求

$.ajax({dataType: 'jsonp'})

后端处理看语言 一般更改为允许跨域即可


相关文章

  • 跨域请求和JSONP

    Cross Domain Request:从一个资源请求另一个资源,二者所在的请求地址不同,域名不同、端口号不同、...

  • 对jsonp 的理解认识

    什么是跨域?为什么要跨域呢?听说jsonp能. 为什么jsonp能跨域呢?什么时候使用jsonp?怎么使用json...

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

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

  • ajax跨域请求

    ajax跨域请求(jsonp) 利用JSONP解决AJAX跨域问题的原理与jQuery解决方案JSONP jQue...

  • cookie和跨域数据交互(jsonp)

    cookie: 跨域数据交互(jsonp) 谁能跨域:JSONP/iframe-window.name/h5-PO...

  • 复习jsonp和promise

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

  • 跨域

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

  • 前端跨域请求实现(待整理)

    1.常用的vue的axios实现请求 2.传统项目使用jsonp解决跨域请求和接受问题

  • 解决ajax跨域问题

    Jsonp解决ajax跨域问题 CORS解决ajax跨域问题

  • 交互那些事(二)

    说完ajax我想必须说说jsonp了,谈到jsonp就必须先说说跨域,首先ajax是不能跨域的,除非后台允许跨域或...

网友评论

      本文标题:跨域请求和JSONP

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