摘要：上节我们讲了同源策略，这节我们讲讲如何跨域。当这些从的脚本执行出错，因为违背了同源策略为了保证用户信息不被泄露，错误信息不会显示出来，取而代之只会返回一个。
前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。
JSONP 跨域请求原理以及实现方式jQuery封装的Ajax调用和JSONP数据跨域请求原理和实现
这节题目有点奇怪啊。
上节我们讲了同源策略，这节我们讲讲如何跨域。这东西就和产品提需求一样，我知道不合理，但是我就想要。
iframe 跨域
比如 www.51vv.com 的一部分（header吧），我 k.51vv.com 也想用。默认情况下不同源，是不允许的。那我们怎么办呢？
domain
postMessage
ajax 跨域
JSONP
CORS
服务器代理
canvas 资源跨域
image 跨域
script 资源跨域
Script error.
为了提升网站的访问速度，我们通常都会将静态资源文件(css, image, javascript)放在CDN。当这些从CDN的JavaScript脚本执行出错，因为违背了同源策略, 为了保证用户信息不被泄露，错误信息不会显示出来，取而代之只会返回一个Script error.。
这部分知识是我们开发中经常会遇到的。下面我们来介绍一下常见的几种方法。
JSONP 跨域方案 JSONP 优缺点
优点
浏览器兼容性强（全支持）
缺点
不安全（嵌入异常逻辑代码）
只能发GET请求
JSONP 原理下面我们来说一下JSONP的原理，顺便分析一下上面的优缺点。
首先 script 标签引入的代码，不管跨不跨域都可以执行。常见的就是CDN的资源，我们拿来使用。
正常的JSON数据为{code: 200, res: [{id:1,state:0},{id:2,state:1}]}。
如果我们 script 标签引入的资源就是带数据的。
比如console.log({code: 200, res: [{id:1,state:0},{id:2,state:1}]})，这样不就等于拿到了数据？
服务端拼接callback名称，动态生成返回数据。
从上面的原理看到JSONP就等于用script加载代码。基于
初级阶段文章目录前端培训-初级阶段（17） - 数据存储（cookie、session、stroage）
前端培训-初级阶段（13） - 正则表达式
前端培训-初级阶段（13） - 类、模块、继承
前端培训-初级阶段（13） - ECMAScript （内置对象、函数）
前端培训-初级阶段（13） - ECMAScript （语法、变量、值、类型、运算符、语句）
前端培训-初级阶段（13、18）
前端培训-初级阶段（9 -12）
前端培训-初级阶段（5 - 8）
前端培训-初级阶段（1 - 4）
中级阶段文章目录前端培训-中级阶段（2） - 事件(event) 事件冒泡、捕获 - （2019-06-20期）
前端培训-中级阶段（3） - DOM 文档对象模型（2019-06-27期）
前端培训-中级阶段（4）- BOM 浏览器对象模型（2019-07-04期）
前端培训-中级阶段（5）- jQuery的概念与基本使用（2019-07-11期）
前端培训-中级阶段（6）- jQuery元素节点操作（2019-07-18期）
前端培训-中级阶段（7）- jQuery的事件绑定链式操作及原理（2019-07-25期）
前端培训-中级阶段（8）- jQuery元素属性样式操作（2019-08-01期）
前端培训-中级阶段（9）- 原生Ajax的运行原理与实现（2019-08-08期）
前端培训-中级阶段（10）- 同源策略（2019-08-15期）
资料前端培训目录、前端培训规划、前端培训计划
浏览器同源策略及跨域的解决方法
Same-origin policy
Script error.全面解析
之前虽然也知道这个错误。但是没有仔细看过。直到静态资源上CDN，才发现了这个问题。
跨域资源共享 CORS 详解 - 阮一峰的网络日志
记得当初是一个上传功能，需要走统一上传服务器发现了CORS和OPTIONS。就是在大佬这里看懂的。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/106032.html
摘要：前端最基础的就是。的原理浏览器发送请求，服务器给出响应。保持之前的界面不变化。的核心创建一个对象，用于发起请求设置为请求，请求发送请求。 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。 ajax ...
摘要：前端最基础的就是。的原理浏览器发送请求，服务器给出响应。保持之前的界面不变化。的核心创建一个对象，用于发起请求设置为请求，请求发送请求。 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。 ajax ...
摘要：前端最基础的就是。的原理浏览器发送请求，服务器给出响应。保持之前的界面不变化。的核心创建一个对象，用于发起请求设置为请求，请求发送请求。 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。 ajax ...
摘要：同源策略是什么同源策略是浏览器的一个安全功能，不同源的数据禁止访问。或许你可以说验证，在浏览器没有同源策略的情况下这些都可以绕过去。总结同源策略是蛮好的，防御了大部分的攻击。 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思...
摘要：前端最基础的就是。帮助从旧的事件方法转换，和。方法移除用绑定的事件处理程序。特定的事件处理程序可以被移除元素上提供事件名称，命名空间，处理函数。用于过滤器的触发事件的选择器元素的后代。事件触发模拟触发原生使用触发。 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS）...
阅读 2303·2021-09-24 09:47
阅读 779·2021-09-24 09:47
阅读 4107·2021-08-27 13:10
阅读 2775·2019-08-30 15:44
阅读 1112·2019-08-29 12:56
阅读 2416·2019-08-28 18:07
阅读 2309·2019-08-26 14:05
阅读 2365·2019-08-26 13:41
