使用JSONP解决同源限制问题

文章目录

Ajax请求限制
Ajax请求过程
JSONP代码优化

Ajax请求限制

Ajax只能向自己的服务器发送请求

同源:如果两个页面拥有相同的协议，端口和域名，那么这两个页面就属于同一个源，其中只要一个不相同，就是不同源
同源政策的目的:为了保证用户信息的安全，防止恶意的网站窃取数据，最初的同源政策是指A网站在客户端设置的Cookie,B网站是不能访问的
使用JSONP解决同源限制问题(它不属于Ajax请求,但他可以模拟Ajax请求)

Ajax请求过程

将不同源的服务器端请求地址写在script标签的src属性中
服务器端相应数据必须是一个函数的调用，真正要发送给客户端的数据需要作为函数调用的参数
在客户端全局作用域下定义函数fn
在fn函数内部对服务器端返回的数据进行处理

JSONP代码优化

客户端需要将函数名称传递到服务器
将script请求的发送变成动态请求

 <button class="btn">点我发送请求</button><!-- <script></script> --><!-- 将非同源服务器端的请求地址写在script标签中 --><!-- <script src="http://localhost:3000/test"></script> --><script>var btn = document.querySelector('.btn');btn.onclick = function(){jsonp({url:'http://localhost:3000/test',data:{name:'lisi',age:20},success:function(data){console.log(123);console.log(data);}})}function jsonp(options){// 动态创建script标签var script = document.createElement('script');var params = '';for(var attr in options.data){params += '&' + attr +'='+options.data[attr];}var fnName = 'myjsonp' + Math.random().toString().replace('.','');// 变成全局函数window[fnName]=options.success;// 设置scr属性script.src = options.url + '?callback=' + fnName + params;// 将script标签追加到页面中document.body.appendChild(script);// 为script添加onload事件script.onload = function(){// 在body内部删除script标签document.body.removeChild(script);}}</script>

使用JSONP解决同源限制问题相关推荐

Django 【第十九篇】JS实现的ajax、同源策略和前端JSONP解决跨域问题
一.回顾jQuery实现的ajax 首先说一下ajax的优缺点优点:AJAX使用Javascript技术向服务器发送异步请求: AJAX无须刷新整个页面: 因为服务器响应内容不再是整个页面,而是页面 ...
php json -gt;访问,【转】Php+ajax+jsonp解决ajax跨域问题
首先:jsonp是json用来跨域的一个东西. 原理是通过script标签的跨域特性来绕过同源策略. 发送端: $.ajax({ type : "post", url : &quo ...
PHP的介绍及应用,ajax的介绍及应用，跨域问题及jsonp解决方法
PHP(服务器编程语言) 服务器由环境(Apache),数据库(mysql),代码(HTML+css +js,php)组成. PHP必须在服务器的环境下执行 php与js最大的区别就是工作环境,PHP ...
jsonp解决跨域问题（简单易懂）
在日常的项目开发中,前端和后台是要经常交互的,有时候前端去请求后端的接口时,会出现跨域这个问题,解决跨域的方法有很多,本文主要讲解下如何使用jsonp来解决跨域问题. 解决问题之前,我们首先要明白一个 ...
jsonp跨域的缺点ajax缺点,浅析JSONP解决Ajax跨域访问问题的思路详解
前几天,工作上有一新需求,需要前端web页面异步调用后台的Webservice方法返回信息.实现方法有多种,本例采用jQuery+Ajax,完成后,在本地调试了一切ok,但是部署到服务器上以后就出现问 ...
如何真正理解用Nginx代理来解决同源策略
经过对同源策略的了解,我们应该要消除对浏览器的误解,同源策略是浏览器做的一件好事,是用来防御来自邪门歪道的攻击,但总不能为了不让坏人进门而把全部人都拒之门外吧.没错,我们这种正人君子只要打开方式正确, ...
jsonp解决ajax跨域问题,用JSONP解决ajax跨域问题
JSONP:JSON With Padding 要点: 1.script标签 2.用script标签加载资源是没有跨域问题的概要: 在资源加载进来之前先定义一个函数,这个函数接受一个参数(数据),函 ...
用jsonp 解决跨域问题
用jsonp 解决跨域问题参考文章: (1)用jsonp 解决跨域问题 (2)https://www.cnblogs.com/jiaoshuai/p/6844993.html 备忘一下.
jQuery ajax 结合vue 获取豆瓣api 数据 ,jsonp解决跨域
jQuery ajax 结合vue 获取豆瓣api 数据 ,jsonp解决跨域 <!DOCTYPE html> <html><head><meta chars ...

使用JSONP解决同源限制问题

文章目录

Ajax请求限制

Ajax请求过程

JSONP代码优化

使用JSONP解决同源限制问题相关推荐

最新文章

热门文章