jsonp 方式处理跨域前后端代码如何配合?
JSONP(JSON with Padding)(json 数据填充)只支持GET请求
是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。
跨域产生原因是浏览器的同源策略。(为了安全)
不同源:
1.协议不同:http 和 https
2.主域不同 www.domain001.com 和 www.domain002.com
3.端口号不同 http://localhost:8088 和 http://localhost:9000。
JSONP原理是:不同源的网站可以相互调用 <script src=“http://www.oop.im/data.php?callback=jQuery33107585929035461674_1530774352156&_=1530774352157”></script>
src 属性里加载的资源不受同源策略影响,具有跨域能力。
前端代码:
$(function(){
$.ajax({
url:'http://www.oop.im/data.php',
type:'GET',
dataType:'jsonp',
jsonp:'callback',
success:function(res){
console.log(res);
}
});
})
注意点:1.dataType:"jsonp" dataType 属性必须设置正确 "jsonp"。
2.jsonp:属性需要设置与后台约定的参数,如果不设置默认也为callback。设置为其他的参数如 jsonWrap 时,Request URL 链接将会变成: http://www.oop.im/data.php?jsonWrap =jQuery3310687844059098403_1530775709409&_=153077570
上图蓝色的 callback 即是 jsonp:"callback",设置的,这个关键词也可以跟后台约定成其他的字符串(如 showJson)。
红色字符串是jquery 随机生成的字符串,后台将数据作为参数包裹在这个随机字符串函数里作为参数传递到前台。
后台代码:
$data = json_encode(array('msg'=>'跨域测试','status'=>true));
echo $_GET['callback'].'('.$data.')';
后台PHP 通过 $_GET("callback") 全局函数获取到 红线框里的随机字符串,并将这个字符串作为 包裹数据的函数名,返回给前台。
jsonp 方式处理跨域前后端代码如何配合?的更多相关文章
- nginx解决跨域(前后端分离)
Nginx解决跨域问题 后端接口 请求地址 返回数据(json数据) http://127.0.0.1:8080//app Hello World! 前端代码 通过nginx做静态资源服务器访问端口8 ...
- vue axios的跨域前后端解决方案
原因出于安全考虑,浏览器有一个同源策略.浏览器中,异步请求的地址与目标地址的协议.域名和端口号三者与当前有不同,就属于跨域请求. 限制跨域访问是浏览器的一个安全策略,因为如果没有这个策略,那么就有被跨 ...
- 01.在vue中通过 JSONP 方式来跨域
//1.引入 : 在main.js 中引入该文件即可 //2.使用: axios.jsonp('地址').then(res => { // console.log(res) // } impor ...
- JSONP实现Ajax跨域请求
前言 由于浏览器存在同源策略的机制,所谓同源策略就是阻止从一个源(域名,包括同一个根域名下的不同二级域名)加载的文档或者脚本获取/或者设置另一个源加载的文档属性. 但比较特别的是:由于同源策略是浏览器 ...
- jquery ajax jsonp跨域调用实例代码
今天研究了AJAX使用JSONP进行跨域调用的方法,发现使用GET方式和POST方式都可以进行跨域调用,这里简单分享下,方便需要的朋友 客户端代码 复制代码 代码如下: <%@ Page Lan ...
- jsonp与cors跨域的一些理解(转)
CORS其实出现时间不短了,它在维基百科上的定义是:跨域资源共享(CORS )是一种网络浏览器的技术规范,它为Web服务器定义了一种方式,允许网页从不同的域访问其资源.而这种访问是被同源策略所禁止的. ...
- 用jQuery与JSONP轻松解决跨域访问的问题
浏览器端的真正跨域访问,推荐的是目前jQuery $.ajax()支持get方式的跨域,这其实是采用jsonp的方式来完成的. var qsData = {'searchWord':$("# ...
- 用jQuery与JSONP轻松解决跨域访问的问题【转】
原文地址:http://www.jb51.net/article/46463.htm 好在,有jquery帮忙,跨域问题似乎没那么难缠了.这次也借此机会对跨域问题来给刨根问底,结合实际的开发项目,查阅 ...
- jsonp与cors跨域的一些理解
浏览器的同源策略,即是浏览器之间要隔离不同域的内容,禁止互相操作. 比如,当你打开了多个网站,如果允许多个网站之间互相操作,那么其中一个木马网站就可以通过这种互相操作进行一系列的非法行为,获取你在各个 ...
随机推荐
- 【C#】浏览器源代码
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
- iOS - 开源框架、项目和学习资料汇总(动画篇)
动画 1. Core Animation笔记,基本的使用方法 – Core Animation笔记,基本的使用方法:1.基本动画,2.多步动画,3.沿路径的动画,4.时间函数,5.动画组.2. awe ...
- Js中对id和class属性进行模糊查询
如题,从例子说明: <div id="divid" class="divclass" > <a id="divid-a" ...
- Pointer Lock
Pointer Lock API 指针锁定(以前叫做 鼠标锁定) 提供了一种输入方法,这种方法是基于鼠标随着时间推移的运动的(也就是说,deltas),而不仅是鼠标光标的绝对位置.通过它可以访问原始的 ...
- CSS基础问题
1.css引入问题 本来以为css引入是很简单的问题,但是在写demo中,使用连接方式引入就出现了问题,找了半天,还是说一下问题吧. 在引入时没有写rel="stylesheet" ...
- Laravel 查询包括软删除的记录
查询结果包括已被软删除的记录: Model::withTrashed()->get(); 只查询软删除记录: Model::onlyTrashed()->get(); PS:个人博客-La ...
- Failed to start LSB: Bring up/down networking.
由于我的虚拟机是从别的机器拷贝过来的,导入新机器后,没有问题,第二天就网络连接不上了,就出现下面的错误 [root@centos ~]# /etc/init.d/network restart Res ...
- Rsync数据同步应用指南
1.软件简介 Rsync 是一个本地或远程数据同步工具,基于RSync算法,这个算法是澳大利亚人Andrew Tridgell发明的:可通过 LAN/WAN 快速同步多台主机间的文件.Rsync 本来 ...
- POJ-1189 钉子和小球(动态规划)
钉子和小球 Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 7452 Accepted: 2262 Description 有一个 ...
- MySQL命令:创建数据库、插入数据
简介: 学习mysql环境为ubantu,下面记录一些基本的创建数据库和插入数据的口令 打开MySQL 服务并使用 root 登录: --打开 MySQL 服务 sudo service mysql ...